Pricing

SelectButton

Figma Source code

Choose one dropdown option from a button, suited to toolbars and compact filters.

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 SelectButton for a button that opens a choice or command menu. For a single form field, use Select. For actions that collapse according to available width, use OverflowActions.

  • Provide a unique string value for each option. Use label to customize the trigger text, or children to replace the list.

  • action mode does not update value or call onchange. Configure the trigger with root-level Props; parts has no Button entry.

Import

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

Usage

Variants

API Reference

Property Type Default Example Description
value SelectValue — value={value} Current selected value (string, number, or undefined); supports bind:value and takes precedence over defaultValue. Selecting an option writes its string value. action mode does not retain a selection.
defaultValue SelectValue — defaultValue={value} Initial selected value when value is undefined. Only persistent mode uses it for the displayed selection. After the first selection, value drives the display.
options SelectOption[] [] options={options} Available choices, each with a string value, label, and optional disabled state. By default, SelectButton creates MenuItem entries. When supplying children, register options explicitly.
placeholder string — placeholder="Search…" Text shown without a selection; always shown on the trigger in action mode. Without a label, selected option text, or placeholder, the trigger text is empty.
name string — name="Example" Form field name. A nonempty name creates a hidden input that submits the selected value as a string.
form string — form="Example" ID of an external form for the hidden input. It takes effect only when name creates that input.
required boolean false required Marks the input Select as required. The current implementation does not connect this to native constraint validation, so validate empty submissions in the application.
disabled boolean false disabled Disables the trigger and prevents opening or changing the menu. The hidden input is not disabled, so an existing value can still be submitted.
readonly boolean false readonly Prevents opening or changing options through the trigger while preserving display and external value updates. The hidden input remains enabled.
invalid boolean false invalid Passes invalid state to the Select wrapper. The Button trigger does not automatically show an error border or aria-invalid; provide validation and error text in the application.
ariaLabel string — ariaLabel="Example" Accessible name for the trigger button. Set it when there is no visible label.
showIndicator boolean true showIndicator Shows the dropdown indicator. false hides both the default and custom indicator without changing selection behavior.
search boolean false search Enables built-in Listbox search for the default list; parts.Listbox.search can override it. With explicit children, configure search on your own Listbox.
selectionMode "persistent" | "action" "persistent" selectionMode="persistent" persistent retains the value and displays the selected option. action calls onAction, closes the list, keeps the placeholder, and does not update value or call onchange.
label Snippet<[SelectButtonLabelContext]> — label={labelContent} Replaces trigger text. Receives value, option, label, and placeholder; the indicator and button behavior remain in place.
indicator Snippet<[SelectButtonIndicatorContext]> — indicator={indicatorContent} Replaces the indicator graphic. Receives open and disabled; rendered only when showIndicator is true.
children Snippet — <SelectButton>Content</SelectButton> Explicit Listbox or MenuItem content in place of the default list. To customize button text, use label instead.
parts ComponentPartsOf<{ Listbox: typeof Listbox; Input: typeof Input; MenuItem: typeof MenuItem; }> — parts={partsOptions} Configures the built-in Listbox, search input, and options. There is no parts.Button entry; configure the trigger at the root. Explicit children configure their own entries.
onchange (event: Event) => void — onchange={(value) => { /* handle value */ }} Called after selecting a different value in persistent mode with a change Event. Read the new value through bind:value. Repeated selection and action mode do not call it.
onAction (value: string) => void — onAction={(value) => { /* handle value */ }} Called with the option value in action mode. The menu then closes without retaining that selection.
onclick (event: MouseEvent) => void — onclick={(value) => { /* handle value */ }} Called after the trigger opens or closes the menu. Not called when disabled or readonly. preventDefault() cannot undo an already completed toggle.
onkeydown (event: KeyboardEvent) => void — onkeydown={(value) => { /* handle value */ }} Called after the component handles keys such as arrows, Enter, and Escape. readonly still forwards key events; the callback cannot undo internal behavior that already ran.