Selector

Selector provides multiple options for user to choose from, typically used in filters and forms.

<Selector options={["one", "two", "three"]} defaultValue={["one"]} />

Example

Basic usage of Selector component.

API

PropertiesDescriptionTypeDefault
columnsNumber of the displayed columnsnumber-
defaultValueSelected value by defaultSelectorValue[][]
disabledWhether to all disable selectingbooleanfalse
fieldNamesCustom field name for label and value and disabled{ label: string, value: string, disabled: string }{ label: 'label', value: 'value', disabled: 'disabled' }
multipleWhether to allow multiple selectionsbooleanfalse
onChangeTriggered when the value is changed(value: SelectorValue[], ext: { items: SelectorOption[] }) => void-
optionsOptional selectorSelectorOption[]-
showMarkWhether to show the check markbooleantrue
valueSelected valueSelectorValue[]-

If using columns of the CSS Grid feature, the compatibility standard is iOS Safari >= 10.3 and Chrome >= 57.

ON THIS PAGE