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

<Meta of={Stories} />

# BooleanField

A boolean input with three display modes for different use cases.

## Usage

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

<BooleanField
  id="notifications"
  label="Enable notifications"
  mode="toggle"
  value={enabled}
  onChange={setEnabled}
/>
```

## Modes

| Mode | Style | Use Case |
|------|-------|----------|
| `toggle` | Checkbox in a card | Enabling/disabling features |
| `yesno` | Styled card buttons | Prominent yes/no choices |
| `radio` | Simple radio buttons | Compact yes/no questions |

## Examples

### Toggle (Checkbox)

For enabling/disabling features like notifications, settings, etc.

<Canvas of={Stories.Toggle} />

### Toggle - Required

<Canvas of={Stories.ToggleRequired} />

### Yes/No (Cards)

For prominent yes/no choices that need visual emphasis.

<Canvas of={Stories.YesNoCards} />

### Yes/No - Custom Labels

<Canvas of={Stories.YesNoCardsCustomLabels} />

### Radio (Simple)

For compact yes/no questions in forms.

<Canvas of={Stories.Radio} />

### Radio - With Description

<Canvas of={Stories.RadioWithDescription} />

### Radio - Custom Labels

<Canvas of={Stories.RadioCustomLabels} />