Combobox

Displays a list of selectable options that can be searched through.

Importing

1 
import { ComboboxContent, ComboboxOption, ComboboxRoot, ComboboxTrigger } from '@infinityfx/fluid';

Usage

Groups

API reference

ComboboxRoot Props

round?

boolean

false

stretch?

boolean

false

variant?

'default' | 'inverted'

'default'

position?

'auto' | 'center'

'auto'

autoFocus?

boolean

true

Focus the first item or search field when opening the menu.

mobileContainer?

'popover' | 'modal'

'popover'

How to display the dropdown content on mobile devices.

ComboboxTrigger Props

longpress?

boolean

false

Requires a long press to open the combobox dropdown.

disabled?

boolean

false

ComboboxContent Props

size?

'xsm' | 'sml' | 'med' | 'lrg'

'med'

searchable?

boolean

false

Enables a search field at the top of the dropdown.

placeholder?

string

"Search.."

Placeholder text shown inside the search field.

emptyMessage?

string

"Nothing found"

Text shown when no options match the search.

virtualItemHeight?

number

When set to a number greater than 0, enables virtual scrolling for better performance with large option lists.

ComboboxOption Props

value?

T extends string | number | string[]

The unique value associated with this option.

disabled?

boolean

false

onSelect?

(value: T) => void