Autocomplete

Autocomplete component is a text input that shows suggestions as you type.

View Source

Import

Global
Single

import { Autocomplete } from '@rothko-ui/react';

Usage

Example
Code

Menu Variant

Example
Code

Render Option

Example
Code

Disabled

Example
Code

Props

Name	Type	Default	Description
Name className	Type `string`	Default	Description CSS class name(s).
Name clearable	Type `boolean`	Default `true`	Description Whether the autocomplete is clearable.
Name disabled	Type `boolean`	Default	Description Whether the autocomplete is disabled.
Name error	Type `boolean`	Default	Description Whether the autocomplete has an error state.
Name errorText	Type `string`	Default `"Invalid"`	Description The error message to display when the autocomplete has an error state.
Name label	Type `string`	Default	Description The label for the autocomplete.
Name menuVariant	Type `'top' \| 'bottom'`	Default `'bottom'`	Description The position of the autocomplete menu.
Name noResultsMessage	Type `ReactNode`	Default `"No results"`	Description The message to display when there are no search results.
Name onBlur	Type `(e: FocusEvent) => void`	Default	Description Event handler for when the autocomplete loses focus.
Name onChange	Type `(value: V \| null) => void`	Default	Description Event handler for when the autocomplete value changes.
Name onClear	Type `() => void`	Default	Description Event handler for when the autocomplete is cleared.
Name onClose	Type `() => void`	Default	Description Event handler for when the autocomplete is closed.
Name onFocus	Type `(e: FocusEvent) => void`	Default	Description Event handler for when the autocomplete gains focus.
Name onOpen	Type `() => void`	Default	Description Event handler for when the autocomplete is opened.
Name options	Type `Option<V, T>[]`	Default	Description The options for the autocomplete.
Name placeholder	Type `string`	Default `"Select"`	Description The placeholder text for the autocomplete.
Name renderOption	Type `RenderOption<V, T>`	Default `DefaultRenderOption`	Description Custom rendering function for autocomplete options.
Name searchFn	Type `QueryMatchFn<V, T>`	Default	Description Custom search function for filtering options.
Name style	Type `CSSProperties`	Default	Description Inline styles for the autocomplete.
Name value	Type `V \| null`	Default	Description The selected value of the autocomplete.