Demo

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
Sine
Square
Sawtooth
Triangle
Selected: sine

With Placeholder

Placeholder text shown when no option is selected.

Filter Type
Basic
Low Pass
High Pass
Advanced
Band Pass
Notch
Selected: (none)

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
Master
Bus 1 - Drums
Bus 2 - Instruments
Bus 3 - Vocals
No Output
Note: "No Output" is disabled

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