Select

Inputs

Stablev1.0.0

Accessible dropdown select component for choosing from a list of options. Built with Ariakit.

Preview

Select a fruit

Country

Installation

npx @component-labs/cli add select

This will:
- Install required dependencies
- Copy the Select component to your project
- Add utility functions (cn helper)

Make sure you've initialized Component Labs first:
```bash
npx @component-labs/cli init
```

Usage

import { Select } from "@component-labs/ui";

const options = [
  { value: "apple", label: "Apple" },
  { value: "banana", label: "Banana" },
  { value: "orange", label: "Orange" },
];

<Select options={options} placeholder="Select a fruit" />

Props

Name	Type	Default	Description
`options*`	`SelectOption[]`	`-`	Array of options with { value: string, label: ReactNode, disabled?: boolean }
`defaultValue`	`string`	`-`	Default selected value (uncontrolled)
`value`	`string`	`-`	Controlled selected value
`onChange`	`(value: string) => void`	`-`	Callback when selection changes
`placeholder`	`string`	`"Select an option..."`	Placeholder text when no value is selected
`disabled`	`boolean`	`-`	Whether the select is disabled
`label`	`ReactNode`	`-`	Label for the select
`error`	`string`	`-`	Error message to display
`className`	`string`	`-`	Additional CSS classes

Examples

Basic

A simple select dropdown

const options = [
  { value: "apple", label: "Apple" },
  { value: "banana", label: "Banana" },
  { value: "orange", label: "Orange" },
];

<Select options={options} placeholder="Select a fruit" />

With Label

Select with a label

const options = [
  { value: "us", label: "United States" },
  { value: "uk", label: "United Kingdom" },
  { value: "ca", label: "Canada" },
];

<Select
  options={options}
  label="Country"
  placeholder="Choose your country"
/>

With Error

Select with validation error

<Select
  options={options}
  label="Required field"
  error="Please select an option"
/>

Controlled

Controlled select

const [value, setValue] = useState("");

<Select
  options={options}
  value={value}
  onChange={setValue}
  label="Controlled Select"
/>

With Disabled Options

Select with some disabled options

const options = [
  { value: "option1", label: "Option 1" },
  { value: "option2", label: "Option 2 (disabled)", disabled: true },
  { value: "option3", label: "Option 3" },
];

<Select options={options} />

Disabled

Disabled select

<Select
  options={options}
  disabled
  defaultValue="apple"
/>

Performance

Bundle Size

~4KB gzipped

Minified and gzipped

Dependencies

•@ariakit/react
•class-variance-authority
•clsx
•tailwind-merge
•lucide-react

Accessibility

•Full keyboard navigation support
•Proper ARIA attributes for combobox pattern
•Screen reader friendly error messages
•Focus management and visual indicators