Skip to main content

Autocomplete

The Autocomplete component is a single-line textbox component that is useful in two scenarios:

  1. As a combo-box - a value is chosen from a predefined set of options such as a country list.
  2. As a free-solo - the textbox may contain an arbitrary value, but it saves the user time by suggesting values. An example is Google Search, where a completion string appears inline after the input cursor.

The Autocomplete component is used independently or as a form component. To use it as a form component, place it within a Form Block.

Properties

NameTypeDefaultDescription
namestringSpecifies the name of the component (form component only).
valueanySpecifies a default value for the component; if the value contains an array, a combo-box will support multiple selections (form component only).
labelnodeSpecifies a label for the component.
requiredboolfalseIf true, a selection must be made or input must be entered.
autofocusboolfalseIf true, autofocus is enabled.
readOnlyboolfalseIf true, the autocomplete is read only.
optionsarrayDefines a list of options for the component in the form of label/value pairs.
valueanySpecifies the value of the autocomplete. The value must be equal to the option to be selected.
defaultValueanySpecifies a default value for the component (independent component only).
disabledboolIf true, the autocomplete is disabled.
getOptionLabelfuncDetermines the label for a given option.
isOptionEqualToValuefuncDetermines if the option selected represents a given value.
autoCompleteboolfalseIf true, the completion string appears inline after the input cursor in the text box.
autoHighlightboolfalseIf true, the first option in the options list is highlighted.
autoSelectboolfalseIf true, the option selected becomes the input value when the Autocomplete loses focus.
loadingboolfalseIf true, the component is in a loading state and displays the value of the loading text.
clearOnBlurboolfalseIf true, the input's text is cleared on blur if no value is selected.
clearOnEscapeboolfalseIf true, clear all values when the user presses escape, and the popup is closed.
loadingTextnodeThe text to display when in a loading state.
noOptionsTextnodeThe text to display when there are no options.
openTextstringOverride the default text for the open popup icon button.
openboolfalseIf true, displays the component.
openOnFocusboolfalseIf true, the popup will open on input focus.
popUpIconnodeThe icon to display to replace the default popup icon.
clearIconnodeThe icon to display in place of the clear icon.
disableClearableboolfalseIf true, the input cannot be cleared.
disableCloseOnSelectboolfalseIf true, the popup will not close when a value is selected.
disabledItemsFocusableboolfalseIf true, will allow focus on disabled items.
disableListWrapboolfalseIf true, the list box in the popup will not wrap focus.
disablePortalboolfalseIf true, the Popper content will be under the DOM hierarchy of parent component.
filterSelectedOptionsboolfalseIf true, hide the selected options from the list box.
freeSoloboolfalseIf true, the user input is not bound to provided options.
filterOptionsfuncDetermines the filtered options to be rendered on search.
getOptionDisabledfuncDetermines the disabled state for a given option.
groupByfuncThe options will be grouped under the return string.
handleHomeEndKeysboolfalseIf true, handle the "Home" and "End" keys when the popup is open and move focus, respectively.
includeInputInListboolfalseIf true, the highlight can move to the input.
IDstringThe ID is to implement accessibility logic. If empty, a random id is generated.
inputValuestringThe input value.
selectOnFocusboolfalseIf true, the input's text is selected on focus.

Style Attributes

NameTypeDefaultDescription
variantstandard
outlined
filled
string
outlinedDefines the visual display of the component.
sizemedium
small
string
mediumDefines the size of the component.
fullWidthboolfalseIf true, the autocomplete occupies the full width of its container.

Subcomponents

The Autocomplete component has a subcomponent that allows an icon to replace the default popup or clear icons.

Icon

Popup Icon - specifies an icon to replace the default popup icon.

Clear Icon - specifies an icon to replace the clear icon.

For further details, see the Icon component.

Properties

NameTypeDefaultDescription
colorinherit
primary
secondary
action
disabled
error
string
inheritDefines the color of the icon.
sizeinherit
small
medium
large
string
smallDefines the size of the icon.
viewBox0 0 24 24Defines the size of the view box that displays the icon.
fillhex #ffffff
rgb 5,5,5
The fill color of the icon.
strokehex #ffffff
rgb 5,5,5
The stroke color of the icon.

For more detail on the Autocomplete component, see the MUI developer docs.

on this page
Was this article useful?
89% of our users said this content was useful.