# Questionnaire: Right to left

> The slide follows the reading direction.

Example: https://hextaui.com/docs/questionnaire/examples/rtl
Component docs: https://hextaui.com/docs/questionnaire.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/questionnaire-rtl.json
```

This adds `components/examples/questionnaire/rtl.tsx` with the Questionnaire component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/questionnaire/rtl.tsx"
"use client"

import {
  Questionnaire,
  QuestionnaireActions,
  QuestionnaireChoice,
  QuestionnaireChoices,
  QuestionnaireItem,
  QuestionnaireNext,
  QuestionnairePrevious,
  QuestionnaireProgress,
  QuestionnaireSubmit,
  QuestionnaireTitle,
} from "@/components/ui/questionnaire"

const items = [
  {
    name: "language",
    prompt: "ما اللغة التي تفضلها؟",
    choices: ["العربية", "الإنجليزية", "كلاهما"],
  },
  {
    name: "theme",
    prompt: "أي مظهر تستخدم؟",
    choices: ["فاتح", "داكن", "حسب النظام"],
  },
]

export function QuestionnaireRtl() {
  return (
    <div dir="rtl" className="w-full max-w-md rounded-xl border p-5">
      <Questionnaire onSubmit={(event) => event.preventDefault()}>
        <QuestionnaireProgress />
        {items.map((item) => (
          <QuestionnaireItem key={item.name} name={item.name} required>
            <QuestionnaireTitle>{item.prompt}</QuestionnaireTitle>
            <QuestionnaireChoices>
              {item.choices.map((choice) => (
                <QuestionnaireChoice key={choice} value={choice}>
                  {choice}
                </QuestionnaireChoice>
              ))}
            </QuestionnaireChoices>
          </QuestionnaireItem>
        ))}
        <QuestionnaireActions>
          <QuestionnairePrevious>السابق</QuestionnairePrevious>
          <QuestionnaireNext>التالي</QuestionnaireNext>
          <QuestionnaireSubmit>إرسال</QuestionnaireSubmit>
        </QuestionnaireActions>
      </Questionnaire>
    </div>
  )
}
```

## Props in this example

### QuestionnaireItem

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `name` | `string` | – | The form field name. |
| `required` | `boolean` | `false` |  |

### QuestionnaireChoice

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `string` | – |  |

## More Questionnaire examples

- [Lift transition and bar](https://hextaui.com/docs/questionnaire/examples/lift.md)
- [Auto-advance](https://hextaui.com/docs/questionnaire/examples/auto-advance.md)
- [Conditional questions](https://hextaui.com/docs/questionnaire/examples/conditional.md)