ComboBox

A text input that filters a list of options.

Related product

ComboBox.tsx

import {ComboBox, ComboBoxItem} from 'alinea/components'

export function ComboBoxExample() {
  return (
    <ComboBox label="Related product" defaultValue="chair" style={{width: 280}}>
      <ComboBoxItem value="shirt">Linen shirt</ComboBoxItem>
      <ComboBoxItem value="chair">Oak dining chair</ComboBoxItem>
      <ComboBoxItem value="throw">Wool throw</ComboBoxItem>
      <ComboBoxItem value="table">Walnut side table</ComboBoxItem>
    </ComboBox>
  )
}

Props

`<ComboBox>`

A labelled text input that filters a list of options to pick from

PropTypeDefaultDescription

valuestring | nullDefault –

defaultValuestring | nullDefault –

onValueChange(value: string | null) => voidDefault –Called with the selected value, or null when the selection is cleared

inputValuestringDefault –

defaultInputValuestringDefault –

onInputValueChange(value: string) => voidDefault –

placeholderstringDefault –

allowsCustomValuebooleanDefault –Keep text that does not match an item instead of reverting it on blur

emptyMessageReactNodeDefault –Shown in the list when no item matches, the list stays closed if unset

namestringDefault –Name of the hidden form input carrying the value

autoFocusbooleanDefault –

labelReactNodeDefault –

descriptionReactNodeDefault –

errorReactNodeDefault –

requiredbooleanDefault –

disabledbooleanDefault –

readOnlybooleanDefault –

iconIconType | ReactElementDefault –

sharedbooleanDefault –Marks the field as shared between translations

openbooleanDefault –

defaultOpenbooleanDefault –

onOpenChange(open: boolean) => voidDefault –

Also accepts className and style, id and aria-* labelling attributes and data-* attributes.

`<ComboBoxItem>`

PropTypeDefaultDescription

value*stringDefault –

textValuestringDefault –Text used for filtering and the input, defaults to string children

disabledbooleanDefault –

Also accepts className and style.