MultipleSelect

Picks several values, shown as tags in the field.

Materials

Linen

Oak

MultipleSelect.tsx

import {MultipleSelect, MultipleSelectItem} from 'alinea/components'

export function MultipleSelectExample() {
  return (
    <MultipleSelect
      label="Materials"
      defaultValue={['linen', 'oak']}
      style={{width: 300}}
    >
      <MultipleSelectItem value="linen">Linen</MultipleSelectItem>
      <MultipleSelectItem value="oak">Oak</MultipleSelectItem>
      <MultipleSelectItem value="wool">Wool</MultipleSelectItem>
      <MultipleSelectItem value="walnut">Walnut</MultipleSelectItem>
    </MultipleSelect>
  )
}

Props

`<MultipleSelect>`

A labelled field to pick several values from a searchable list, the selected values are shown as removable tags.

PropTypeDefaultDescription

valueArray<string>Default –

defaultValueArray<string>Default –

onValueChange(value: Array<string>) => voidDefault –

placeholderstringDefault –

emptyMessageReactNodeDefault 'No options'Shown in the list when no item matches the search, defaults to "No options"

namestringDefault –Name of the hidden form input carrying the values

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.

`<MultipleSelectItem>`

PropTypeDefaultDescription

value*stringDefault –

textValuestringDefault –Text used for searching and the tag, defaults to string children

disabledbooleanDefault –

Also accepts className and style.