open-vault/ui/lib/core/stories/select.md

1.9 KiB

Select

Select components are used to render a dropdown.

Param Type Default Description
label String The label for the select element.
options Array A list of items that the user will select from. This can be an array of strings or objects.
[name] String The name of the select, used for the test selector.
[selectedValue] String The currently selected item. Can also be used to set the default selected item. This should correspond to the value of one of the <option>s.
[valueAttribute] String value When options is an array objects, the key to check for when assigning the option elements value.
[labelAttribute] String label When options is an array objects, the key to check for when assigning the option elements' inner text.
[isInline] Bool false Whether or not the select should be displayed as inline-block or block.
[isFullwidth] Bool false Whether or not the select should take up the full width of the parent element.
onChange Func The action to take once the user has selected an item. This method will be passed the value of the select.

Example

<Select
  @label='Date Range'
  @options={{[{ value: 'berry', label: 'Berry' }]}}
  @onChange={{onChange}}/>

See