Select

Dropdown select for choosing from a list of options. Built on Radix UI Select.

Import

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

Usage

<Select
  label="Country"
  placeholder="Select a country"
  options={[
    { value: 'vn', label: 'Vietnam' },
    { value: 'us', label: 'United States' },
    { value: 'jp', label: 'Japan' },
  ]}
/>

Controlled

const [country, setCountry] = useState('');

<Select
  label="Country"
  value={country}
  onChange={setCountry}
  options={[...]}
/>

API

Prop	Type	Default	Description
label	string	—	Label text
placeholder	string	—	Placeholder text
options	SelectOption[]	required	Options list
value	string	—	Controlled value
onChange	(value: string) => void	—	Change handler
error	string	—	Error message
disabled	boolean	false	Disable select

SelectOption

Prop	Type	Description
value	string	Option value
label	string	Display label
disabled	boolean	Disable option

Accessibility

Built on Radix UI Select:

• Full keyboard navigation (Arrow keys, Enter, Escape)
• Typeahead search
• Proper ARIA attributes