import { Canvas, Meta } from '@storybook/blocks'
import * as Stories from './DropdownField.stories'

<Meta of={Stories} />

# DropdownField

A select dropdown with support for flat or grouped options.

## Usage

```tsx
import { DropdownField } from '@/components/onboarding'

<DropdownField
  id="country"
  label="Country"
  placeholder="Select a country"
  options={[
    { value: 'us', label: 'United States' },
    { value: 'ca', label: 'Canada' },
  ]}
  value={country}
  onChange={setCountry}
/>
```

## Examples

### Default

<Canvas of={Stories.Default} />

### With Value

<Canvas of={Stories.WithValue} />

### Grouped Options

<Canvas of={Stories.GroupedOptions} />

### With Description

<Canvas of={Stories.WithDescription} />

### Disabled

<Canvas of={Stories.Disabled} />