Autocomplete

yarn add @clayui/autocomplete

An autocomplete text field is an input that offers the user text suggestions while they type.

Stable3.41.0View in LexiconCHANGELOGstorybook demos

Autocomplete

PropertyTypeRequiredDefaultDescription
component
React.ForwardRefExoticComponent<any>falseReact.forwardRef< HTMLDivElement, React.HTMLAttributes<HTMLDivElement> >(({children, ...otherProps}, ref) => ( <ClayInput.Group {...otherProps} ref={ref}> <ClayInput.GroupItem>{children}</ClayInput.GroupItem> </ClayInput.Group> ))Div component to render. It can be a one component that will replace the markup.

Autocomplete.DropDown

PropertyTypeRequiredDefaultDescription
alignElementRef
React.RefObject<HTMLElement>falseHTML element that the menu should be aligned to
active
booleanfalsefalseFlag to indicate if menu is showing or not.
closeOnClickOutside
React.ComponentProps< typeof ClayDropDown.Menu >['closeOnClickOutside']falseFlag to indicate if clicking outside of the menu should automatically close it.
onSetActive
(val: boolean) => voidfalse() => {}Callback function for when active state changes.

Autocomplete.Input

Extends from `ClayForm.Input`

Autocomplete.Item

ClayAutocomplete.Item is a wrapper around ClayDropDown.Item but also underlines the bold characters that are matched. Feel free to create your own match rule using ClayDropDown.Item's API.

PropertyTypeRequiredDefaultDescription
innerRef
React.Ref<HTMLAnchorElement>false
match
stringfalse''Match is the string that will be compared with value.
value
stringtrueValue is the string that will be compared to the characters of the match property.

Autocomplete.LoadingIndicator

PropertyTypeRequiredDefaultDescription
component
React.ComponentType<any>false({children, ...otherProps}) => ( <ClayInput.GroupInsetItem {...otherProps} after> <span className="inline-item inline-item-middle">{children}</span> </ClayInput.GroupInsetItem> )Div component to render. It can be a one component that will replace the markup.

How can this be improved? Create an issue!