Skip to main content

Autocomplete

Please refer to MUI's official docs for more details on component's usage guide and API documentation.

Variants

Use variant={'filled' | 'standard'} prop with TextField component in renderInput prop with Autocomplete component for different variants of input. Use disabled prop with Autocomplete component for disabled autocomplete.



Controlled and Uncontrolled

Use value prop with Autocomplete component for controlled autocomplete input.



Free Solo

Use freeSolo prop so the textbox can contain any arbitrary value.



Autocomplete Props

Each of the following examples demonstrate one feature of Autocomplete component.



Country Select

Choose one of the countries.



Creatable

You can create an option other than from the list.



Multiple Values

Use multiple prop to select multiple options from the list.

Inception
Inception
Inception


Disabled Options

Use getOptionDisabled prop to disable some options from the list.



Grouped

Use groupBy prop to group the list according to your needs.



Checkboxes

Use Checkbox component in renderOption prop to render checkbox in options.



Fixed Options

You can fix an option in the input and add any other option as well.

Pulp Fiction
Inception


Small Size

Use size='small' prop for small sized input.

Inception


Limit Tags

Use limitTags prop to limit tags in the input.

Inception
Forrest Gump
+1


Custom Filter

Use filterOptions prop to filter the search according to your needs.



Custom Input

Use renderInput prop to customize the rendered input.