storybookjs/storybook-ui

Select

Base

Sizes

Paddings

Pseudo States

Many Options

Long Option Labels

Custom Option Rendering

With Siblings

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)

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

Chromatic publishes Storybook to streamline collaboration

Learn more Sign in