Select
Dropdown selection for choosing from a list of options. Supports option groups, custom styling, and keyboard navigation.
Basic Select
Simple dropdown with a list of options.
Waveform
Selected: sineSine
Square
Sawtooth
Triangle
With Placeholder
Placeholder text shown when no option is selected.
Filter Type
Selected: (none)Basic
Low Pass
High Pass
Advanced
Band Pass
Notch
Option Groups
Options can be organized into labeled groups.
Filter
Basic
Low Pass
High Pass
Advanced
Band Pass
Notch
All Pass
EQ
Low Shelf
High Shelf
Peaking
Sizes
Selects come in three sizes.
Small
Sine
Square
Sawtooth
Triangle
Medium
Sine
Square
Sawtooth
Triangle
Large
Sine
Square
Sawtooth
Triangle
Full Width
Select can expand to fill its container.
Time Signature
4/4 (Common Time)
3/4 (Waltz)
6/8 (Compound Duple)
2/4 (March)
5/4
7/8
Disabled Options
Individual options can be disabled.
Output Routing
Note: "No Output" is disabledMaster
Bus 1 - Drums
Bus 2 - Instruments
Bus 3 - Vocals
No Output
States
Select has different visual states.
Normal
Sine
Square
Sawtooth
Triangle
Disabled
Sine
Square
Sawtooth
Triangle
DAW Usage Examples
Common select use cases in a DAW interface.
Time Sig
4/4 (Common Time)
3/4 (Waltz)
6/8 (Compound Duple)
2/4 (March)
5/4
7/8
OSC 1
Sine
Square
Sawtooth
Triangle
OSC 2
Sine
Square
Sawtooth
Triangle
Filter
Basic
Low Pass
High Pass
Advanced
Band Pass
Notch
Output
Master
Bus 1 - Drums
Bus 2 - Instruments
Bus 3 - Vocals
Keyboard Navigation
Select supports full keyboard navigation.
Opening/Closing
- Enter or Space - Open dropdown / Select focused option
- Escape - Close dropdown
- Tab - Close and move to next element
Navigation (when open)
- Arrow Down - Move focus to next option
- Arrow Up - Move focus to previous option
- Home - Move focus to first option
- End - Move focus to last option
ARIA
- role="listbox" - Dropdown is a listbox
- aria-expanded - Indicates open state
- aria-selected - Indicates selected option