Design System

Single Select

Single select dropdowns allow users to choose one option from a list. They support unfiltered, filtered, hover, focus, and disabled states — all driven by semantic tokens that adapt automatically between light and dark modes.

Select States

Click the interactive select to open the dropdown, choose an option, and see the filtered state. The clear button resets to the default “All Organizations” state.

Interactive

All Organizations

Disabled

All Organizations

With Search Box

Add a search input inside the dropdown to help users filter long option lists. The search input uses bg.hover for its background and border.default for its border.

With Search

All Organizations

Specifications

Input

Padding

10px 12px

Border Radius

6px

Border Width

1.5px

Font Size

14px

Gap (clear to chevron)

8px

Dropdown Menu

Border Radius

6px

Border

1px

Shadow

0 10px 15px

Margin Top

4px

Option Padding

10px 12px

Option Font Size

14px

Search Box (optional)

Container Padding

8px

Input Padding

8px 10px

Input Border

1px

Input Border Radius

4px

Theming

Select colours use a combination of shared tokens and select-specific tokens. The trigger reuses input tokens for border states, while the dropdown menu introduces menu-specific tokens for selection highlighting.

Input Colors

Property

Token

Light

Dark

Background

--bg-card

white

gray.800

Background Filtered

--select-bg-filtered

brand.25

brand.600 @ 10%

Background Disabled

--neutral-bg

gray.100

gray.900

Border

--border

gray.200

gray.700

Border Hover

--input-border-hover

gray.300

gray.600

Border Focus

--input-border-focus

brand.600

Text

--text

gray.900

gray.50

Text Disabled

--text-disabled

gray.500

gray.400

Icon

--text-faint

gray.400

gray.600

Focus Ring

--focus-ring

brand.600

Menu Colors

Property

Token

Light

Dark

Background

--bg-card

white

gray.800

Border

--border-light

gray.100

gray.800

Option Hover

--menu-option-hover

gray.50

gray.800

Option Text

--text

gray.900

gray.50

Option Selected BG

--menu-option-selected

brand.25

brand.600 @ 10%

Checkmark

--menu-checkmark

brand.600

brand.400

Divider

--border-light

gray.100

gray.800

Search Box

Property

Token

Light

Dark

Input Background

--bg-hover

gray.50

gray.800

Input Border

--border

gray.200

gray.700

Icon Color

--text-faint

gray.400

gray.600

Placeholder

--placeholder

tertiary.600

gray.400

Best Practices

Provide a clear default label like “All Organizations” so users understand the unfiltered state

Include a clear button to let users reset their selection easily

Add a search box when the option list exceeds 8-10 items

Use semantic tokens so the select adapts to colour mode automatically

Don't

Don't disable the select without explaining why via a tooltip or helper text

Don't remove the focus ring — it is essential for keyboard navigation

Don't hardcode border or background colours — use semantic tokens

Don't use a single select when users need to choose multiple options

Accessibility

ARIA Roles

Use role="listbox" on the dropdown and role="option" on each item. Set aria-expanded on the trigger to reflect the open/closed state, and aria-selected on the active option.

Keyboard Navigation

Support Enter/Space to open the dropdown, Arrow keys to navigate options, Enter to select, and Escape to close. When the search box is present, it should receive focus automatically when the dropdown opens.

Focus Management

When the dropdown opens, move focus to the first option or the currently selected option. When it closes, return focus to the trigger element.