Design System

Multi Select

Multi select dropdowns allow users to choose multiple options from a list. They support the same visual states as single select — unfiltered, filtered, hover, focus, and disabled — with the added ability to toggle individual options without closing the dropdown.

Select States

Click the interactive select to open the dropdown and toggle options. Selected items display as a comma-separated list in the trigger. The clear button resets to “All Organizations”.

Interactive

All Organizations

Disabled

All Organizations

With Search Box

Add a search input inside the dropdown to help users filter long option lists while selecting multiple items.

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

Multi select shares the same token architecture as single select. The trigger, dropdown, and search box all use identical semantic tokens — the only difference is the interaction model.

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

Keep the dropdown open while users toggle multiple options

Truncate long selection lists with ellipsis in the trigger

Provide “All Organizations” as a quick way to select or reset everything

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

Don't

Don't close the dropdown on each selection — users expect to pick multiple items

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

Don't hardcode colours — use semantic tokens for automatic theme support

Don't use multi select when only one choice is valid — use single select instead

Accessibility

ARIA Roles

Use role="listbox" with aria-multiselectable="true" on the dropdown. Each option should have role="option" and aria-selected reflecting its checked state.

Keyboard Navigation

Support Enter/Space to toggle an option without closing the dropdown. Arrow keys should navigate between options, and Escape should close the dropdown and return focus to the trigger.

Live Region

Announce selection changes to screen readers using an aria-live region so users know how many items are currently selected (e.g., “3 of 5 selected”).