basic-usage-live-preview

import { useAutocomplete } from "@refinedev/mui";
import { Autocomplete, TextField } from "@mui/material";

interface ICategory {
    id: number;
    title: string;
}

const PostCreate: React.FC = () => {
    const { autocompleteProps } = useAutocomplete<ICategory>({
        resource: "categories",
    });

    return (
        <Autocomplete
            {...autocompleteProps}
            getOptionLabel={(item) => item.title}
            isOptionEqualToValue={(option, value) =>
                value === undefined || option?.id?.toString() === (value?.id ?? value)?.toString()
            }
            placeholder="Select a category"
            renderInput={(params) => (
                <TextField
                    {...params}
                    label="Category"
                    margin="normal"
                    variant="outlined"
                    required
                />
            )}
        />
    );
};