Select

Base

Sizes

Paddings

Pseudo States

Many Options

Long Option Labels

Custom Option Rendering

With Siblings

With Siblings in Toolbar

Default Option (single)

Default Option (multi)

Disabled

Disabled with selection (single)

Disabled with selection (multi)

Default Open

Mouse Selection (single)

Mouse Selection (multi)

KB Selection (single, Enter, Enter)

KB Selection (single, Enter, Space)

KB Selection (single, Space, Enter)

KB Selection (single, Space, Space)

KB Selection (multi, Enter, Enter)

KB Selection (multi, Enter, Space)

KB Selection (multi, Space, Enter)

KB Selection (multi, Space, Space)

Full Arrow Navigation

AutoSelect - nothing selected on Mouse open (single)

AutoSelect - first item select on Enter (single)

AutoSelect - first item select on ArrowDown (single)

AutoSelect - last item select on ArrowUp (single)

Mouse Open - PageUp/Down

KB Open - PageUp/Down

Mouse Open - Home/End

KB Open - Home/End

Mouse Deselection (multi)

KB Deselection (multi)

Handlers - onSelect

Handlers - onDeselect

Handlers - onChange

With Reset (single)

With Reset (multi)

KB Reset (single, focus)

KB Reset (multi, Enter)

KB Reset (multi, Space)

Reset Button Visibility (single)

Reset Button Visibility (multi)

Custom Reset Label

Without Reset Option

Non-String Values (single)

Non-String Values (multi)

Default Option - Number

Default Option - Zero

Default Option - Boolean True

Default Option - Boolean False

Default Option - Null

Default Option - Bare undefined does NOT select

Default Option - [undefined] selects undefined option

Default Options - Multiple Non-String Values

Reset vs Undefined Option

Show Selected Option Title (prop=true)

Show Selected Option Title (prop=false)

Show Selected Option Title (prop=false, multi)

Show Selected Option Title (prop=true, multi)

Chromatic publishes Storybook to streamline collaboration

Learn more Sign in