Components / Choice

Select

A dropdown with a filterable listbox. No native <select>.

@ruckc/truss-ui Choice

Import

import { Select } from '@ruckc/truss-ui';

Playground

Recipe: reacting to a user choice

onchange receives the newly chosen value when the user picks an option that differs from the current one. It does not fire when value is changed from code, or when the option that is already selected is chosen again. Choosing an explicit null option passes null.

<Select label="Team" {options} bind:value onchange={(v) => save(v)} />

Recipe: function bindings for immutable state

When state is updated immutably, bind with a getter and a setter instead of bind:value={x}. The setter is the place to copy, validate or map the value.

<script lang="ts">
  let state = $state({ team: 'b' });
  const setTeam = (v: string | null | undefined) => (state = { ...state, team: v ?? 'a' });
</script>

<!-- Svelte function bindings: a getter and a setter -->
<Select label="Team" {options} bind:value={() => state.team, setTeam} />

API

Prop	Type	Default	Description
options required	({ value: V | null; label: string; icon?: IconSource; disabled?: boolean })[]	—	The choices to offer.
value bindable	V | null	—	The selected option value. `undefined` means nothing is selected (the placeholder shows); `null` is a real value, matching an option whose `value` is `null` (an explicit "None").
label	string	—	Visible label shown above the control.
ariaLabel	string	—	Accessible name when no visible `label` is shown.
placeholder	string	'Select…'	Hint shown while the field is empty.
searchable	boolean	true	Show a filter box inside the dropdown.
disabled	boolean	false	Disables the control: it cannot be focused, changed or activated.
error	string	—	Error message. Marks the control invalid, replaces the hint, and is announced to assistive technology.
size	'sm' | 'md' | 'lg'	'md'	Control size: `sm` (24px), `md` (32px, default) or `lg` (40px).
onchange event	(value: V | null) => void	—	Called with the newly chosen value after a user selection that changes it. Not called for programmatic changes to `value` or when the chosen option is already selected.