Select

<Select>TailwindCSS Modules

A stylized dropdown component for selecting a value from a list of options. Supports searching, clearing, and rich validation.

InstallationColoxo CLI

npx coloxo add select --style coloxo-css

ES Module ImportPlayground / npm package

import { Select } from '@coloxo/ui';

Design Tokens:

--cx-focus-ring: #2348FF--cx-bg-primary: #FFFFFF--cx-border-primary: #E2E8F0--cx-radius-md: 8pxelevation: shadow-md

1. Variant Matrix

Select components can behave as standard dropdowns or searchable comboboxes.

Default	Searchable & Clearable	Invalid State
States	Department	Searchable	Error Required

2. Interactive Props Configurator

Searchable

Clearable

Invalid / Error State

Disabled State

Visual Render Canvas

Department

tsx

1<Select2  label="Department"3  placeholder="Select department"4  options={departments}5/>

3. Dark theme

Select popovers automatically adapt to dark mode with appropriate elevation and contrast.

Department

Searchable

4. Enterprise layout compositions

Select components often sit alongside Inputs in complex data entry forms.

Employee Details

Department

Role Level

Save Details

Accessibility

Radix UI Primitives

Select relies on Radix UI Select primitives, ensuring fully accessible keyboard navigation, focus management, and screen reader announcements out of the box.

Searchable Combobox

When `searchable` is true, the component switches to a Radix Popover containing a Command (combobox) interface, preserving focus flow.

Props

Name	Type	Default	Description
label	ReactNode	—	Form field label text.
placeholder	string	—	Placeholder text when no value is selected.
options	SelectOption[]	—	Array of { value, label } options.
searchable	boolean	—	Filterable listbox with search input.
clearable	boolean	—	Allow clearing the selected value.
error	ReactNode	—	Validation message.
disabled	boolean	—	Disable the select control.