Select

Choose from a dropdown built from data or custom options, with search and keyboard support.

We are building SnowUI components into interfaces people can use directly in AI conversations. Conversational UI is still in development; this page demonstrates website usage. Supported chat platforms and component versions will be announced after verification. Generating and using SnowUI interfaces inside AI conversations is completely free. It is not a project, uses no project or developer-seat quota, and requires no SnowUI registration, activation, or paid proof.

How to use

Use Select for a single choice from a dropdown. options creates Listbox and MenuItem entries by default; explicit children replaces that panel. For a command menu, prefer SelectButton. Select is not an arbitrary multiselect or free-entry control.

options generates the default list. Supply Listbox and MenuItem through children to replace it.
persistent saves the choice; action only calls onAction and closes without retaining it. Use parts for generated items and configure explicit children directly.
After the list closes with Escape, field and buttonTrigger/SelectButton modes restore focus to the real trigger button. The shared Listbox handles closing from its search header.

Import

import { Select } from '@snowui-design-system/components';

Usage

Default value

Disabled

Invalid

Binding

Form

Loading

State

Search

Button trigger

Built-in options

Selection mark

API Reference

Property	Type	Default	Example	Description
`value`	`SelectValue`	`—`	`value={value}`	Current value; supports bind:value.
`gap`	`number`	`—`	`gap={42}`	Inherited Frame gap token index. Omit it to retain the original preferred gap. Explicit values override the preference; effective graphics/text spacing remains at least 4 CSS px, including zero, root font scaling and gap scaling.
`defaultValue`	`SelectValue`	`—`	`defaultValue={value}`	Initial value.
`placeholder`	`string`	`—`	`placeholder="Search…"`	Text shown in the trigger while value is empty.
`name`	`string`	`—`	`name="Example"`	Field name used in form submission.
`disabled`	`boolean`	`false`	`disabled`	Disable the Select trigger and choices.
`readonly`	`boolean`	`false`	`readonly`	Make the trigger read-only.
`required`	`boolean`	`false`	`required`	Mark the selection as required.
`form`	`string`	`—`	`form="Example"`	Associate the field with an external form.
`autofocus`	`boolean`	`—`	`autofocus`	Focus on the first render.
`tabindex`	`number`	`—`	`tabindex={42}`	Position in sequential Tab navigation.
`title`	`string`	`—`	`title="Example"`	Native title hint.
`id`	`string`	`—`	`id="example"`	Native element ID.
`invalid`	`boolean`	`false`	`invalid`	Invalid state at the component level.
`children`	`Snippet`	`—`	`<Select>Content</Select>`	Explicit Listbox and MenuItem composition.
`options`	`SelectOption[]`	`[]`	`options={options}`	Data for the built-in list, following ListboxItem fields. Not rendered when explicit children is supplied.
`triggerContent`	`Snippet<[SelectTriggerContext]>`	`—`	`triggerContent={triggerContentContent}`	In buttonTrigger mode, replace button content. Receives value, option, label, placeholder, open, and disabled.
`buttonTrigger`	`boolean`	`false`	`buttonTrigger`	Use Button instead of a field-style trigger while keeping expansion, selection, and focus restoration behavior.
`buttonBare`	`boolean`	`true`	`buttonBare`	Only in buttonTrigger mode, choose whether the built-in Button has an unframed bare appearance.
`selectionMode`	`"persistent" \| "action"`	`"persistent"`	`selectionMode="persistent"`	persistent saves the selected value. action calls onAction, closes the panel, and restores trigger focus without retaining the choice.
`onAction`	`(value: string) => void`	`—`	`onAction={(value) => { /* handle value */ }}`	Called in action mode with the string option value after the panel closes. Return value does not affect selection.
`parts`	`SelectParts`	`—`	`parts={partsOptions}`	Configure generated Listbox, Input, MenuItem, and button trigger. Explicit children do not consume parent parts.
`ariaLabel`	`string`	`—`	`ariaLabel="Example"`	Accessible trigger name. In button-trigger mode without custom content, it is also fallback visible content.
`onclick`	`(event: MouseEvent) => void`	`—`	`onclick={(value) => { /* handle value */ }}`	Called with the original MouseEvent after an enabled, writable trigger toggles the panel.
`oninput`	`(event: Event) => void`	`—`	`oninput={(value) => { /* handle value */ }}`	Called with a change Event from the hidden form input when persistent mode selects a different value. Read the new value from the binding; this is not native text entry.
`onchange`	`(event: Event) => void`	`—`	`onchange={(value) => { /* handle value */ }}`	Called with the same change Event after a persistent selection changes. Repeating the value or using action mode does not call it.
`onfocus`	`(event: FocusEvent) => void`	`—`	`onfocus={(value) => { /* handle value */ }}`	Called with a FocusEvent when the field-style trigger gains focus. Not used directly in button-trigger mode.
`onblur`	`(event: FocusEvent) => void`	`—`	`onblur={(value) => { /* handle value */ }}`	Called with a FocusEvent when the field-style trigger loses focus. Not used directly in button-trigger mode.
`onkeydown`	`(event: KeyboardEvent) => void`	`—`	`onkeydown={(value) => { /* handle value */ }}`	Called with a KeyboardEvent after built-in handling of arrow keys, Enter/Space, and Escape. It cannot undo completed actions.
`onkeyup`	`(event: KeyboardEvent) => void`	`—`	`onkeyup={(value) => { /* handle value */ }}`	Called with a KeyboardEvent on key release in field-style trigger mode. Not used directly in button-trigger mode.