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>
  )
}

Values

The value is an array of the values of the picked items, strings or numbers. With a name the field submits one form entry per value, like a native multiple select: read them with formData.getAll(name).

Props

`<MultipleSelect>`

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

PropTypeDefaultDescription

valueArray<V>Default –The values of the selected MultipleSelectItems

defaultValueArray<V>Default –

onValueChange(value: Array<V>) => 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, it submits one entry per selected value like a native multiple select: read them with formData.getAll(name)

`<MultipleSelectItem>`

PropTypeDefaultDescription

value*KeyDefault –

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

disabledbooleanDefault –

Also accepts className and style.