Select

One choice from a short list, with typeahead.

Currency

RTP level

select.example.svelte

<script lang="ts">
  import { Select } from '@onlywin/ui-svelte';

  const currencies = [
    { label: 'Euro', value: 'EUR' },
    { label: 'US dollar', value: 'USD' },
    { label: 'Pound sterling', value: 'GBP' },
    { disabled: true, label: 'Bitcoin', value: 'BTC' },
  ];

  let currency = $state<string | null>('EUR');
</script>

<div class="example-grid">
  <Select label="Currency" options={currencies} bind:value={currency} />
  <Select
    label="RTP level"
    placeholder="Choose a level"
    options={[
      { label: '96.50%', value: '0.9650' },
      { label: '95.50%', value: '0.9550' },
      { label: '94.50%', value: '0.9450' },
    ]}
  />
</div>

Usage

Do

Use it for 5 to 15 options known in advance.
Order options in the way readers look for them.

Don’t

Do not use it for 2 or 3 options; use RadioGroup.
Do not use it for long lists; use Combobox.

Accessibility

A button with the combobox role that controls a listbox; the active option is aria-activedescendant.
The chosen option is aria-selected; disabled options are skipped.

Keyboard

Select keyboard interactions
Keys	Action
`Enter, Space, Arrow Down, Arrow Up`	Open the list
`Arrow Down, Arrow Up, Home, End`	Move through options
`Letters`	Jump by typing
`Enter, Space`	Choose and close
`Escape`	Close without choosing

Props

The same props in both frameworks. In React, class is className, events are camelCase (onClick), content passed as Svelte snippets is a ReactNode prop, every bindable value has a default… twin for uncontrolled use, and elementRef reaches the DOM element.

Select props
Prop	Type	Default	Description
`disabled`	`boolean`	`false`
`error`	`string`	—
`hint`	`string`	—
`label` *required	`string`	—
`name`	`string`	—	Submits the value with a form, through a hidden input.
`onValueChange`	`(value: string) => void`	—
`optional`	`boolean`	`false`
`options` *required	`ReadonlyArray<IUiOption>`	—
`placeholder`	`string`	—
`size`	`'md' \| 'sm'`	`'md'`
`value`	`string \| null`	`null`	Bindable in Svelte; `defaultValue` in React.