Canarist UI

Select

Custom accessible dropdown. Supports keyboard navigation, labels, errors, and disabled state.

Controlled

import { useState } from 'react'
import { Select } from '@canarist/ui'

const options = [
  { value: 'retail', label: 'Retail' },
  { value: 'manufacturing', label: 'Manufacturing' },
]

function Example() {
  const [value, setValue] = useState('')
  return (
    <Select
      label="Industry"
      options={options}
      value={value}
      onChange={setValue}
      placeholder="Select industry..."
    />
  )
}

Error state

Please select an industry.

<Select
  label="Industry"
  options={options}
  value=""
  onChange={setValue}
  error="Please select an industry."
/>

Reference

PropTypeDefaultDescription
options{ value: string; label: string }[]—List of selectable options.
valuestring—Currently selected value.
onChange(value: string) => void—Called when a new option is selected.
labelstring—Label rendered above the select.
placeholderstring'Select...'Placeholder text when no value is selected.
errorstring—Error message. Applies destructive border style.
disabledboolean—Disable the select.