Thrive Design System

Components

Select Checkbox Searchable

A multi-select dropdown with search filtering and checkbox items for selecting multiple options from a large list.

Installation

npm install @thrivecart/ui
yarn add @thrivecart/ui
pnpm add @thrivecart/ui
bun add @thrivecart/ui

Usage

import { SelectCheckboxSearchable } from '@thrivecart/ui';

Examples

Basic Searchable Multi-Select

Default

Multi-select with search and checkboxes

<SelectCheckboxSearchable
			items={[
				{ label: 'Marketing', value: 'marketing' },
				{ label: 'Sales', value: 'sales' },
				{ label: 'Engineering', value: 'engineering' },
				{ label: 'Design', value: 'design' },
				{ label: 'Support', value: 'support' },
			]}
			value={selected}
			placeholder="Select teams..."
			searchPlaceholder="Search teams..."
			onChange={setSelected}
		/>

Best Practices

✓

Include search for large lists

Search is essential when there are more than 7-10 items.

✓

Show selected count

Display how many items are selected in the trigger when the dropdown is closed.

✗

Don't use for single selection

For single-value selection, use the standard Select component.

✗

Don't hide selection state

Make it clear which items are checked, even after scrolling.

Props

Props

Accessibility

  • Search input is focused when the dropdown opens.
  • Checkbox items are navigable with Arrow keys.
  • Selected state is announced by screen readers.
  • Escape closes the dropdown.