Select

This documentation covers Select (native select wrapper with enhancements) and SelectDropdown (custom dropdown).

Select (Native Wrapper)

Overview

• Variants: basic, rounded
• Sizes: sm, md, lg
• Features: label, disabled, multiple, searchable (client-side filter), placeholder, custom arrow

Props

Prop	Type	Default	Description
options	{ value: string; label: string }[]	[]	Options list
value	string | string[]	-	Selected value(s)
onChange	function	-	Change handler (for native select event)
label	string	''	Optional label text
className	string	''	Additional classes
variant	'basic' | 'rounded'	'basic'	Visual style
size	'sm' | 'md' | 'lg'	'md'	Size variant
disabled	boolean	false	Disable control
multiple	boolean	false	Enable multiple selection
searchable	boolean	false	Show search input (client-side filter)
placeholder	string	'Select...'	Placeholder for single select
...props	any	-	Spread to native <select>

Usage

const options = [
  { value: 'apple', label: 'Apple' },
  { value: 'banana', label: 'Banana' },
]

<Select options={options} value={value} onChange={(e) => setValue(e.target.value)} placeholder='Select fruit...' />
<Select options={options} value={value} onChange={(e) => setValue(e.target.value)} variant='rounded' />
<Select options={options} value={value} onChange={(e) => setValue(e.target.value)} size='sm' />
<Select options={options} value={value} onChange={(e) => setValue(e.target.value)} disabled />

Multiple & Searchable

// Multiple + search (native)
<Select
  options={options}
  value={values}
  onChange={(e) => setValues(Array.from(e.target.selectedOptions).map((o) => o.value))}
  multiple
  searchable
  placeholder='Select multiple...'
/>

Examples (from SelectPage)

• Basic, rounded
• Sizes: sm, md, lg
• Disabled
• Multiple + search
• Labeled model select (label prop)

Styling

• Root: .select
• Label: .select-label
• Search input: .select-search-input
• Wrapper: .select-wrapper
• Native: .select-native
• Arrow: .select-arrow
• Variants: .select-rounded
• Sizes: .select-sm | .select-md | .select-lg
• Disabled: .disabled

SelectDropdown (Custom Dropdown)

A fully custom select UI with single/multiple and search (see SelectPage usage). API mirrors the value/onChange contract via controlled values.

Props

Prop	Type	Default	Description
options	{ value: string; label: string }[]	[]	Options list
value	string | string[]	-	Selected value(s)
onChange	(value) => void	-	Called with new value(s)
multiple	boolean	false	Multiple selection
searchable	boolean	false	Search/filter options
placeholder	string	'Select...'	Placeholder text

Usage

<SelectDropdown options={options} value={single} onChange={setSingle} placeholder='Select fruit...' />
<SelectDropdown options={options} value={multi} onChange={setMulti} multiple searchable placeholder='Select multiple...' />

Best Practices

• Use native Select for forms where accessibility and standard keyboard interactions are preferred.
• Use SelectDropdown for richer UI and advanced behaviors.

Accessibility

• Provide clear labels and placeholders
• Ensure focus states are visible
• For multiple selections, convey selected state clearly