Select

A styled native select dropdown with label and validation support.

Import

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

Basic Usage

<Select>
  <option value="">Select an option</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</Select>

Props

With Label

<Select label="Country">
  <option value="">Select a country</option>
  <option value="us">United States</option>
  <option value="uk">United Kingdom</option>
  <option value="ca">Canada</option>
</Select>

With Error

<Select label="Plan" error="Please select a plan">
  <option value="">Select a plan</option>
  <option value="free">Free</option>
  <option value="pro">Pro</option>
</Select>

With Helper Text

<Select label="Timezone" helperText="Select your local timezone">
  <option value="utc">UTC</option>
  <option value="est">Eastern Time</option>
  <option value="pst">Pacific Time</option>
</Select>

Controlled Select

'use client';
import { useState } from 'react';
import { Select } from '@/components/ui';

export function LanguageSelect() {
  const [language, setLanguage] = useState('en');

  return (
    <Select
      label="Language"
      value={language}
      onChange={(e) => setLanguage(e.target.value)}
    >
      <option value="en">English</option>
      <option value="es">Spanish</option>
      <option value="fr">French</option>
    </Select>
  );
}

Form Example

<form className="space-y-4">
  <Input label="Name" />
  <Select label="Role">
    <option value="">Select a role</option>
    <option value="admin">Admin</option>
    <option value="user">User</option>
    <option value="viewer">Viewer</option>
  </Select>
  <Select label="Department">
    <option value="">Select department</option>
    <option value="eng">Engineering</option>
    <option value="sales">Sales</option>
    <option value="marketing">Marketing</option>
  </Select>
  <Button color="blue">Save</Button>
</form>

For Searchable Select

If you need a searchable/filterable dropdown, use:

import { SearchableSelect } from '@/components/ui';

See SearchableSelect for searchable dropdown with autocomplete.