# Questionnaire: Lift transition and bar

> `transition="lift"` moves questions up and down like a stack. `variant="bar"` on the progress shows one continuous bar.

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

## Add this example

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

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

## Source

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

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

const items = [
  {
    name: "team",
    prompt: "How big is your team?",
    choices: ["Just me", "2–10", "11–50", "More than 50"],
  },
  {
    name: "stage",
    prompt: "Where is your product today?",
    choices: ["Idea", "In development", "Launched"],
  },
  {
    name: "timeline",
    prompt: "When do you want to ship?",
    choices: ["This month", "This quarter", "No rush"],
  },
]

export function QuestionnaireLift() {
  return (
    <div className="w-full max-w-md rounded-xl border p-5">
      <Questionnaire
        transition="lift"
        onSubmit={(event) => event.preventDefault()}
      >
        <QuestionnaireProgress variant="bar" />
        {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 />
          <QuestionnaireNext />
          <QuestionnaireSubmit />
        </QuestionnaireActions>
      </Questionnaire>
    </div>
  )
}
```

## Props in this example

### Questionnaire

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `transition` | `"slide" \| "lift"` | `"slide"` |  |

### QuestionnaireProgress

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"segments" \| "bar"` | `"segments"` |  |

### QuestionnaireItem

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

### QuestionnaireChoice

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

## More Questionnaire examples

- [Auto-advance](https://hextaui.com/docs/questionnaire/examples/auto-advance.md)
- [Conditional questions](https://hextaui.com/docs/questionnaire/examples/conditional.md)
- [Right to left](https://hextaui.com/docs/questionnaire/examples/rtl.md)