Formsstable
Select
An accessible dropdown select component for choosing a single option from a list of choices.
Installation
Install the component directly into your project using the Pittaya CLI.
npx pittaya@latest add select
When to use
Use Select when you need users to choose a single option from a predefined list of 5 or more items. For shorter lists (2-4 options), consider using Radio Buttons instead for better visibility and accessibility.
Select components are ideal for forms where space is limited but you need to present multiple options. They work well for settings, filters, configuration panels, and data entry forms.
Best practices
- Always provide a clear placeholder or default value that describes what the user should select.
- Keep option labels concise and descriptive—avoid overly long text that might be truncated.
- Sort options in a logical order: alphabetically, numerically, or by frequency of use.
- Use
SelectGroupandSelectLabelto organize related options into categories for better scanability. - Provide visual feedback for disabled states and ensure proper error messaging when validation fails.
- For searchable or very long lists, consider using a Combobox or Multi-Select component instead.
Accessibility
The Select component is built on Radix UI primitives and follows WAI-ARIA design patterns for accessible dropdown menus. It includes:
- Full keyboard navigation support (Arrow keys, Enter, Escape, Home, End)
- Proper ARIA attributes for screen readers (
aria-expanded,aria-haspopup,role="combobox") - Focus management that traps focus within the dropdown when open
- Type-ahead functionality for quick option selection
Always pair Select with a visible Label component for clarity, even if using placeholder text.
Examples
Combine variants and sizes to meet your needs.
Basic usage
A simple select for choosing a programming language with a placeholder.
With label
Select paired with a label for better accessibility and form structure.
Grouped options
Organize related options into groups with labels for better navigation in larger lists.
With separator
Use separators to visually divide different sections of options without explicit grouping.
Disabled state
Prevent user interaction with the select using the disabled prop.
Disabled items
Disable specific options within the select while keeping others interactive.
With default value
Pre-select an option by providing a defaultValue for uncontrolled components.
Properties
TSX interface that combines variants and default attributes.
| Prop | Type | Default | Description |
|---|---|---|---|
defaultValue | string | — | The value of the select when initially rendered. Useful for uncontrolled components. |
value | string | — | The controlled value of the select. Must be used with onValueChange for controlled components. |
onValueChange | (value: string) => void | — | Event handler called when the selected value changes. |
disabled | boolean | false | When true, prevents the user from interacting with the select. |
name | string | — | The name of the select. Submitted with its owning form as part of a name/value pair. |
required | boolean | false | When true, indicates that the user must select a value before the owning form can be submitted. |