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

<Meta of={Stories} />

# MultiSelectField

A searchable dropdown for selecting multiple options with badge chips.

## Usage

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

<MultiSelectField
  id="languages"
  label="Languages"
  options={[
    { value: 'en', label: 'English' },
    { value: 'es', label: 'Spanish' },
  ]}
  value={selected}
  onChange={setSelected}
/>
```

## Examples

### Default

<Canvas of={Stories.Default} />

### With Values

<Canvas of={Stories.WithValues} />

### With Description

<Canvas of={Stories.WithDescription} />

### With Error

<Canvas of={Stories.WithError} />

### Disabled

<Canvas of={Stories.Disabled} />