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 the CustomTextField component in the renderInput prop with the CustomAutocomplete component to render a custom autocomplete. Use disabled and readOnly props with the CustomAutocomplete component for disabled and read-only autocomplete respectively.


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 CustomAutocomplete component for controlled autocomplete input.


Autocomplete Props

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


Country Select

Choose one of the countries.


Free Solo

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


Creatable

You can create an option other than from the list.


Grouped

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


Disabled Options

Use getOptionDisabled prop to disable some options from the list.


Fixed Options

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

Pulp Fiction
Inception

Multiple Values

Use multiple prop to select multiple options from the list.

Inception
Inception
Inception

Checkboxes

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


Limit Tags

Use limitTags prop to limit tags in the input.

Inception
Forrest Gump
+1

Medium Size

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

Inception

Custom Input

Use renderInput prop to customize the rendered input.


Custom Filter

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