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 within a Form Block.

Properties

Name	Type	Default	Description
name	string		Specifies the name of the component (form component only).
value	any		Specifies a default value for the component; if the value contains an array, a combo-box will support multiple selections (form component only).
label	node		Specifies a label for the component.
required	bool	false	If true, a selection must be made or input must be entered.
autofocus	bool	false	If true, autofocus is enabled.
readOnly	bool	false	If true, the autocomplete is read only.
options	array		Defines a list of options for the component in the form of label/value pairs.
value	any		Specifies the value of the autocomplete. The value must be equal to the option to be selected.
defaultValue	any		Specifies a default value for the component (independent component only).
disabled	bool		If true, the autocomplete is disabled.
getOptionLabel	func		Determines the label for a given option.
isOptionEqualToValue	func		Determines if the option selected represents a given value.
autoComplete	bool	false	If true, the completion string appears inline after the input cursor in the text box.
autoHighlight	bool	false	If true, the first option in the options list is highlighted.
autoSelect	bool	false	If true, the option selected becomes the input value when the Autocomplete loses focus.
loading	bool	false	If true, the component is in a loading state and displays the value of the loading text.
clearOnBlur	bool	false	If true, the input's text is cleared on blur if no value is selected.
clearOnEscape	bool	false	If true, clear all values when the user presses escape, and the popup is closed.
loadingText	node		The text to display when in a loading state.
noOptionsText	node		The text to display when there are no options.
openText	string		Override the default text for the open popup icon button.
open	bool	false	If true, displays the component.
openOnFocus	bool	false	If true, the popup will open on input focus.
popUpIcon	node		The icon to display to replace the default popup icon.
clearIcon	node		The icon to display in place of the clear icon.
disableClearable	bool	false	If true, the input cannot be cleared.
disableCloseOnSelect	bool	false	If true, the popup will not close when a value is selected.
disabledItemsFocusable	bool	false	If true, will allow focus on disabled items.
disableListWrap	bool	false	If true, the list box in the popup will not wrap focus.
disablePortal	bool	false	If true, the Popper content will be under the DOM hierarchy of parent component.
filterSelectedOptions	bool	false	If true, hide the selected options from the list box.
freeSolo	bool	false	If true, the user input is not bound to provided options.
filterOptions	func		Determines the filtered options to be rendered on search.
getOptionDisabled	func		Determines the disabled state for a given option.
groupBy	func		The options will be grouped under the return string.
handleHomeEndKeys	bool	false	If true, handle the "Home" and "End" keys when the popup is open and move focus, respectively.
includeInputInList	bool	false	If true, the highlight can move to the input.
ID	string		The ID is to implement accessibility logic. If empty, a random id is generated.
inputValue	string		The input value.
selectOnFocus	bool	false	If true, the input's text is selected on focus.

Style Attributes

Name	Type	Default	Description
variant	standard outlined filled string	outlined	Defines the visual display of the component.
size	medium small string	medium	Defines the size of the component.
fullWidth	bool	false	If 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

Name	Type	Default	Description
color	inherit primary secondary action disabled error string	inherit	Defines the color of the icon.
size	inherit small medium large string	small	Defines the size of the icon.
viewBox	0 0 24 24		Defines the size of the view box that displays the icon.
fill	hex #ffffff rgb 5,5,5		The fill color of the icon.
stroke	hex #ffffff rgb 5,5,5		The stroke color of the icon.

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