Select

Form Input

Choose from a set of items

Multiple

Multiple Select
Searchable
Groupable
Taggable
Screen Reader enhanced
Keyboard support
Customizable

Quickstart #

<script>
	import { Select } from '@steeze-ui/components'

	const items = [
		{ label: 'First' },
		{ label: 'Second' }
	] 
</script>

<Select {items} value="{items[0]}" />

API Reference #

Property	Type	Default
`items`	`SelectItem[]`	`[]`
`value`	`SelectItem`	`null`
`multiple`	`Boolean`	`false`
`searchable`	`Boolean`	`false`
`clearable`	`Boolean`	`false`
`groupBy`	`(item:T) => string`	`null`
`filterBy`	`(item:T, searchText:string) => boolean`	`null`
`taggable`	`(value: string) => T`	`null`
`pushTags`	`Boolean`	`false`
`retainOnSelect`	`Boolean`	`false`
`loop`	`Boolean`	`false`
`label`	`String`	`''`
`helper`	`String`	`''`
`placeholder`	`String`	`''`
`itemLabelRenderer`	`(e:T) => string`	`e => e?.['label'] ?? '`
`position`	`FloatingPosition`	`'bottom'`
`width`	`String`	`'12rem'`
`focus`	`Boolean`	`false`
`disabled`	`Boolean`	`false`
`*`	`*`	`-`

Styling #

Name	Default
`--st-select-color`	`--st-field-color`
`--st-select-font-size`	`--st-field-font-size`
`--st-select-font-weight`	`--st-field-font-weight`
`--st-select-search-color`	`--st-field-color`
`--st-select-search-font-size`	`--st-field-font-size`
`--st-select-search-font-weight`	`--st-field-font-weight`
`--st-select-button-size`	`--st-field-button-size`
`--st-select-button-color`	`--st-field-button-color`
`--st-select-tags-gap`	`0.325rem`
`--st-select-tag-padding`	`0 0.325rem`
`--st-select-tag-border-radius`	`--st-border-radius-sm`
`--st-select-tag-font-size`	`--st-font-size-sm`
`--st-select-tag-font-weight`	`--st-field-font-weight`
`--st-select-tag-color`	`--st-field-color`
`--st-select-tag-bg-color`	`--st-tag-bg-color`

Examples #

Custom Value Renderer

Changes how the label will be rendered for the Input and Selector Items. This is needed in case where your item object has no label property

<script>
  const items = [{value:"value 1"}]
</script>

<Select {items} itemLabelRenderer={(e)=>`Item: ${e.value}`} />

Custom Selector Item

Render a completely custom Menu Item using the item slot and its let: properties. Don't forget to apply the id, to make it accessible for screen readers

<Select {items}>
  <p
    slot="item"
    let:id let:item let:label
    let:focused let:selected
    let:onSelect let:onFocus
    {id}
    on:pointerdown={onSelect}
    on:pointerover={onFocus}
    style:background-color={focused ? "blue" : "" }
    style:color={selected ? "red" : "" }
  >
    {label}
  </p>
</Select>

Grouping Items

Sort items by Grouping them together.

<script>
  const items = [
    {value:"Value 1",group:"Group 1"},
    {value:"Value 2",group:"Group 2"},
    {value:"Value 3",group:"Group 2"},
  ]
</script>

<Select {items} groupBy={(e)=>e.group} />