Skip to content

Autocomplete API

API reference docs for the React Autocomplete component. Learn about the props, CSS, and other APIs of this exported module.

Demos

For examples and details on the usage of this React component, visit the component demo pages:

Import

import Autocomplete from '@mui/material/Autocomplete';
// or
import { Autocomplete } from '@mui/material';
Learn about the difference by reading this guide on minimizing bundle size.

Props

Props of the native component are also available.

optionsRequired

renderInputRequired

autoComplete

autoHighlight

autoSelect

blurOnSelect

ChipProps

classes

clearIcon

clearOnBlur

clearOnEscape

clearText

closeText

componentsProps

defaultValue

disableClearable

disableCloseOnSelect

disabled

disabledItemsFocusable

disableListWrap

disablePortal

filterOptions

filterSelectedOptions

forcePopupIcon

freeSolo

fullWidth

getLimitTagsText

getOptionDisabled

getOptionLabel

groupBy

handleHomeEndKeys

id

includeInputInList

inputValue

isOptionEqualToValue

limitTags

ListboxComponent

ListboxProps

loading

loadingText

multiple

noOptionsText

onChange

onClose

onHighlightChange

onInputChange

onOpen

open

openOnFocus

openText

PaperComponent

PopperComponent

popupIcon

readOnly

renderGroup

renderOption

renderTags

selectOnFocus

size

slotProps

sx

value

The ref is forwarded to the root element.

Theme default props

You can use MuiAutocomplete to change the default props of this component with the theme.


CSS

The following class names are useful for styling with CSS (the state classes are marked).
To learn more, visit the component customization page.

.MuiAutocomplete-root

.MuiAutocomplete-fullWidth

.Mui-expandedSTATE

.Mui-focusedSTATE

.Mui-focusVisibleSTATE

.MuiAutocomplete-tag

.MuiAutocomplete-tagSizeSmall

.MuiAutocomplete-tagSizeMedium

.MuiAutocomplete-hasPopupIcon

.MuiAutocomplete-hasClearIcon

.MuiAutocomplete-inputRoot

.MuiAutocomplete-input

.MuiAutocomplete-inputFocused

.MuiAutocomplete-endAdornment

.MuiAutocomplete-clearIndicator

.MuiAutocomplete-popupIndicator

.MuiAutocomplete-popupIndicatorOpen

.MuiAutocomplete-popper

.MuiAutocomplete-popperDisablePortal

.MuiAutocomplete-paper

.MuiAutocomplete-listbox

.MuiAutocomplete-loading

.MuiAutocomplete-noOptions

.MuiAutocomplete-option

.MuiAutocomplete-groupLabel

.MuiAutocomplete-groupUl


You can override the style of the component using one of these customization options: