# Onboarding Question

One onboarding question: progress, Skip, four choice cards with number keys, and Continue.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/onboarding-question
```

## Usage

```tsx
import { OnboardingQuestion } from '@/components/fetaui/onboarding-question'

export function Example() {
  return <OnboardingQuestion question="What is your role?" step={1} steps={3} onContinue={next} onSkip={skip} />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| question | string | required |
| step, steps | number | required |
| choices | OnboardingChoice[] | ROLE_CHOICES |
| description | string |  |
| value, defaultValue | string |  |
| onValueChange | (value) => void |  |
| onContinue | (value) => void |  |
| onSkip | () => void |  |
| animated | boolean | true |

## When to use

- For a short setup question with icons that help people choose.

## When not to use

- For a run of several linked questions: use Questionnaire.

## Accessibility

- Choices are native radios in a group labelled by the question.
- Selected adds a ring and wash, and focus has its own outline.
- Progress is a labelled progress bar.

## Motion

- The panel fades and rises 8 over 400 ms, and rows fade in 40 ms apart.
- The ring changes over 120 ms.
- With reduced motion, the panel fades only and values swap.