Patternassessment

Questionnaire

Stable

Uma pergunta por vez, e o caminho de ida e volta entre elas: posição, alternativas de uma ou de várias escolhas, resposta digitada, atalho de teclado por alternativa e a linha de ações. Guarda as respostas e a posição, cada uma podendo ser do chamador. Não sabe o que é certo — devolve as respostas e quem chamou decide.

Instalação

npx up-web-ds add questionnaire

Usage

@/components/questionnaire

import {
  Questionnaire,
  QuestionnaireActions,
  QuestionnaireChoice,
  QuestionnaireChoices,
  QuestionnaireDescription,
  QuestionnaireError,
  QuestionnaireInput,
  QuestionnaireItem,
  QuestionnaireNext,
  QuestionnairePrevious,
  QuestionnaireProgress,
  QuestionnaireSkip,
  QuestionnaireSubmit,
  QuestionnaireTitle,
} from '@/components/questionnaire'

Questionnaire

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55<Questionnaire className="max-w-lg">
  <QuestionnaireProgress />

  <QuestionnaireItem name="nivel" required>
    <QuestionnaireTitle>
      Como você descreveria seu nível em React?
    </QuestionnaireTitle>
    <QuestionnaireDescription>
      Serve para escolher o ritmo da trilha, não para avaliar ninguém.
    </QuestionnaireDescription>
    <QuestionnaireChoices>
      <QuestionnaireChoice shortcut="1" value="inicio">
        Começando agora
      </QuestionnaireChoice>
      <QuestionnaireChoice shortcut="2" value="projetos">
        Já entreguei alguns projetos
      </QuestionnaireChoice>
      <QuestionnaireChoice shortcut="3" value="producao">
        Mantenho React em produção
      </QuestionnaireChoice>
    </QuestionnaireChoices>
    <QuestionnaireError />
  </QuestionnaireItem>

  <QuestionnaireItem name="ritmo">
    <QuestionnaireTitle>Quanto tempo por semana?</QuestionnaireTitle>
    <QuestionnaireChoices>
      <QuestionnaireChoice shortcut="1" value="2h">
        Até 2 horas
      </QuestionnaireChoice>
      <QuestionnaireChoice shortcut="2" value="5h">
        Entre 2 e 5 horas
      </QuestionnaireChoice>
      <QuestionnaireChoice shortcut="3" value="mais">
        Mais de 5 horas
      </QuestionnaireChoice>
    </QuestionnaireChoices>
    <QuestionnaireError />
  </QuestionnaireItem>

  <QuestionnaireItem name="objetivo">
    <QuestionnaireTitle>
      O que você quer conseguir fazer?
    </QuestionnaireTitle>
    <QuestionnaireInput placeholder="Em uma frase" />
    <QuestionnaireError />
  </QuestionnaireItem>

  <QuestionnaireActions>
    <QuestionnairePrevious />
    <QuestionnaireSkip />
    <QuestionnaireNext />
    <QuestionnaireSubmit />
  </QuestionnaireActions>
</Questionnaire>

Props

Questionnaire

Props de Questionnaire
Prop	Type	Default	Description
defaultStep	`number`	`0`	The question to open on.
defaultValue	`Readonly<Record<string, QuestionnaireAnswer>>`	`{}`	The answers to start from.
labels	`Partial<QuestionnaireLabels>`	sem valor padrão	Overrides for the fixed strings. Pass only the ones to change.
onStepChange	`((step: number) => void)`	sem valor padrão
onSubmit	`((answers: QuestionnaireAnswers) => void)`	sem valor padrão	Called with every answer once the last question is submitted.
onValueChange	`((answers: QuestionnaireAnswers) => void)`	sem valor padrão
step	`number`	sem valor padrão	Index of the question on screen, when the caller owns it.
value	`Readonly<Record<string, QuestionnaireAnswer>>`	sem valor padrão	Every answer, when the caller owns them.

Estende Omit< ComponentProps<'form'>, 'defaultValue' | 'onSubmit' >. Aceita também os atributos padrão de um elemento React (286 não listados).

QuestionnaireProgress

Estende ComponentProps<'p'>. Aceita também os atributos padrão de um elemento React (280 não listados).

QuestionnaireItem

Props de QuestionnaireItem
Prop	Type	Default	Description
name, obrigatória	`string`	sem valor padrão	Key this question's answer is stored under.
required	`boolean`	`false`	Whether the reader may move on without answering.

Estende Omit<ComponentProps<'div'>, 'title'>. Aceita também os atributos padrão de um elemento React (279 não listados).

QuestionnaireTitle

Estende ComponentProps<'h3'>. Aceita também os atributos padrão de um elemento React (280 não listados).

QuestionnaireDescription

Estende ComponentProps<'p'>. Aceita também os atributos padrão de um elemento React (280 não listados).

QuestionnaireChoices

Props de QuestionnaireChoices
Prop	Type	Default	Description
type	`"multiple" \| "single"`	`'single'`	Whether the question takes one answer or several. `single` is a radio group, `multiple` a group of checkboxes.

Estende HTMLAttributes<HTMLElement>. Aceita também os atributos padrão de um elemento React (278 não listados).

QuestionnaireChoice

Props de QuestionnaireChoice
Prop	Type	Default	Description
value, obrigatória	`string`	sem valor padrão	What this choice records as the answer.
disabled	`boolean`	`false`
shortcut	`string`	sem valor padrão	A key that chooses it. Shown as a `Kbd`, and pressed anywhere in the form.

Estende Omit< ComponentProps<'label'>, 'onChange' >. Aceita também os atributos padrão de um elemento React (281 não listados).

QuestionnaireChoiceDescription

Estende ComponentProps<'span'>. Aceita também os atributos padrão de um elemento React (280 não listados).

QuestionnaireInput

Props de QuestionnaireInput
Prop	Type	Default	Description
className	`string \| ((state: InputState) => string \| undefined)`	sem valor padrão	CSS class applied to the element, or a function that returns a class based on the component's state.
onValueChange	`((value: string, eventDetails: Input.ChangeEventDetails) => void)`	sem valor padrão	Callback fired when the `value` changes. Use when controlled.
render	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, InputState>`	sem valor padrão	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
style	`React.CSSProperties \| ((state: InputState) => React.CSSProperties \| undefined)`	sem valor padrão	Style applied to the element, or a function that returns a style object based on the component's state.

Estende Omit< ComponentProps<typeof Input>, 'value' | 'defaultValue' | 'onChange' >. Aceita também os atributos padrão de um elemento React (303 não listados).

QuestionnaireError

Estende ComponentProps<'p'>. Aceita também os atributos padrão de um elemento React (280 não listados).

QuestionnaireActions

Estende ComponentProps<'div'>. Aceita também os atributos padrão de um elemento React (280 não listados).

QuestionnairePrevious

Props de QuestionnairePrevious
Prop	Type	Default	Description
onClick	`((event: BaseUIEvent<MouseEvent<HTMLButtonElement, MouseEvent>>) => void)`	sem valor padrão
size	`"default" \| "sm" \| "xs" \| "lg" \| "icon" \| "icon-xs" \| "icon-sm" \| "icon-lg" \| null`	sem valor padrão
variant	`"link" \| "destructive" \| "primary" \| "outline" \| "secondary" \| "ghost" \| null`	`'outline'`
className	`string \| ((state: ButtonState) => string \| undefined)`	sem valor padrão	CSS class applied to the element, or a function that returns a class based on the component's state.
focusableWhenDisabled	`boolean`	`false`	Whether the button should be focusable when disabled.
nativeButton	`boolean`	`true`	Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (for example, `<div>`).
render	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, ButtonState>`	sem valor padrão	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
style	`React.CSSProperties \| ((state: ButtonState) => React.CSSProperties \| undefined)`	sem valor padrão	Style applied to the element, or a function that returns a style object based on the component's state.

Estende Omit<ComponentProps<typeof Button>, 'onClick'>. Aceita também os atributos padrão de um elemento React (284 não listados).

QuestionnaireSkip

Props de QuestionnaireSkip
Prop	Type	Default	Description
onClick	`((event: BaseUIEvent<MouseEvent<HTMLButtonElement, MouseEvent>>) => void)`	sem valor padrão
size	`"default" \| "sm" \| "xs" \| "lg" \| "icon" \| "icon-xs" \| "icon-sm" \| "icon-lg" \| null`	sem valor padrão
variant	`"link" \| "destructive" \| "primary" \| "outline" \| "secondary" \| "ghost" \| null`	`'ghost'`
className	`string \| ((state: ButtonState) => string \| undefined)`	sem valor padrão	CSS class applied to the element, or a function that returns a class based on the component's state.
focusableWhenDisabled	`boolean`	`false`	Whether the button should be focusable when disabled.
nativeButton	`boolean`	`true`	Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (for example, `<div>`).
render	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, ButtonState>`	sem valor padrão	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
style	`React.CSSProperties \| ((state: ButtonState) => React.CSSProperties \| undefined)`	sem valor padrão	Style applied to the element, or a function that returns a style object based on the component's state.

Estende Omit<ComponentProps<typeof Button>, 'onClick'>. Aceita também os atributos padrão de um elemento React (284 não listados).

QuestionnaireNext

Props de QuestionnaireNext
Prop	Type	Default	Description
onClick	`((event: BaseUIEvent<MouseEvent<HTMLButtonElement, MouseEvent>>) => void)`	sem valor padrão
size	`"default" \| "sm" \| "xs" \| "lg" \| "icon" \| "icon-xs" \| "icon-sm" \| "icon-lg" \| null`	sem valor padrão
variant	`"link" \| "destructive" \| "primary" \| "outline" \| "secondary" \| "ghost" \| null`	sem valor padrão
className	`string \| ((state: ButtonState) => string \| undefined)`	sem valor padrão	CSS class applied to the element, or a function that returns a class based on the component's state.
focusableWhenDisabled	`boolean`	`false`	Whether the button should be focusable when disabled.
nativeButton	`boolean`	`true`	Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (for example, `<div>`).
render	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, ButtonState>`	sem valor padrão	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
style	`React.CSSProperties \| ((state: ButtonState) => React.CSSProperties \| undefined)`	sem valor padrão	Style applied to the element, or a function that returns a style object based on the component's state.

Estende Omit<ComponentProps<typeof Button>, 'onClick'>. Aceita também os atributos padrão de um elemento React (284 não listados).

QuestionnaireSubmit

Props de QuestionnaireSubmit
Prop	Type	Default	Description
size	`"default" \| "sm" \| "xs" \| "lg" \| "icon" \| "icon-xs" \| "icon-sm" \| "icon-lg" \| null`	sem valor padrão
variant	`"link" \| "destructive" \| "primary" \| "outline" \| "secondary" \| "ghost" \| null`	sem valor padrão
className	`string \| ((state: ButtonState) => string \| undefined)`	sem valor padrão	CSS class applied to the element, or a function that returns a class based on the component's state.
focusableWhenDisabled	`boolean`	`false`	Whether the button should be focusable when disabled.
nativeButton	`boolean`	`true`	Whether the component renders a native `<button>` element when replacing it via the `render` prop. Set to `false` if the rendered element is not a button (for example, `<div>`).
render	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, ButtonState>`	sem valor padrão	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
style	`React.CSSProperties \| ((state: ButtonState) => React.CSSProperties \| undefined)`	sem valor padrão	Style applied to the element, or a function that returns a style object based on the component's state.

Estende Omit<ActionProps, 'onClick'>. Aceita também os atributos padrão de um elemento React (284 não listados).

prop obrigatória.

Composition

O Questionnaire é o form: guarda as respostas, a posição e as strings fixas. O QuestionnaireProgress diz onde a pessoa está; cada QuestionnaireItem é uma pergunta, e só a atual fica visível; o QuestionnaireActions é a linha de baixo, onde Avançar e Enviar dividem a mesma célula — escreva os dois e aparece o que couber.

Composição de Questionnaire

Questionnaire

QuestionnaireProgress
QuestionnaireItem
- QuestionnaireTitle
- QuestionnaireDescription
- QuestionnaireChoices
  - QuestionnaireChoice
    - QuestionnaireChoiceDescription
- QuestionnaireInput
- QuestionnaireError
QuestionnaireActions
- QuestionnairePrevious
- QuestionnaireSkip
- QuestionnaireNext
- QuestionnaireSubmit

Metadata

Notas de acessibilidade

Verificado em tests/e2e/questionnaire.spec.ts no Chromium desktop e mobile, em light e dark, com Axe sem violações WCAG 2.2 AA. Teclado: o grupo de alternativas é uma parada de tabulação só e as setas escolhem dentro dele, com anel de foco lido do navegador; a próxima parada é a linha de ações. O atalho de cada alternativa funciona de qualquer lugar do formulário e se cala enquanto uma resposta de texto está sendo digitada, então um dígito digitado é um dígito. Leitor de tela: uma escolha é um radiogroup e várias são um fieldset, os dois nomeados pela pergunta e descritos pela descrição dela e, quando existe, pelo erro; a posição é um role="status", então avançar é anunciado sem roubar o foco; o atalho entra no nome como atalho e não como parte da resposta, com o keycap aria-hidden ao lado do texto que o diz. A pergunta que não é a atual continua montada — para que a contagem seja a que o autor escreveu — e fica hidden, que é display:none: fora da ordem de tabulação e fora da árvore, verificado em navegador. Toque verificado em 375px com emulação de toque: o controle tem 16px e não é o alvo — o alvo é o cartão, um label de 44px cujas quatro bordas respondem ao toque —, os botões da linha de ações atingem 24x24 e nada rola horizontalmente. Reduced motion verificado em navegador com prefers-reduced-motion: reduce — trocar de pergunta é uma troca de visibilidade e não uma travessia, nada se desloca, e o que transita é cor, que fica.

Classificação

Layer: Pattern
Domínio: Education
Categoria: assessment
Status: Stable

Origem e distribuição

Fonte: shadcn registry / questionnaire
Licença: MIT
URL: https://ui.shadcn.com/r/styles/base-vega/questionnaire.json
Distribuição: Interna

Acessibilidade

Teclado: revisado
Leitor de tela: revisado
Touch: revisado
Reduced motion: revisado

Dependências

Pacotes: Nenhuma
Ícones: Nenhum
Construído sobre: Button Checkbox Input Kbd Label Radio Group
Usado por: Nenhum ainda

Instalação

Preview

Como você descreveria seu nível em React?

Quanto tempo por semana?

O que você quer conseguir fazer?

Quais fundamentos você já domina?

Em quais áreas você quer evoluir?

Como você prefere avançar na trilha?

Como você prefere estudar?

What do you do?

How large is the team?

Qual hook roda depois que a tela já foi pintada?

Onde um Server Component é renderizado?

O que serve como `key` numa lista?

Como você descreveria seu nível em React?

Quanto tempo por semana?

O que você quer conseguir fazer?

Quais fundamentos você já domina?

Em quais áreas você quer evoluir?

Como você prefere avançar na trilha?

Como você prefere estudar?

What do you do?

How large is the team?

Qual hook roda depois que a tela já foi pintada?

Onde um Server Component é renderizado?

O que serve como `key` numa lista?

Usage

Props

Questionnaire

QuestionnaireProgress

QuestionnaireItem

QuestionnaireTitle

QuestionnaireDescription

QuestionnaireChoices

QuestionnaireChoice

QuestionnaireChoiceDescription

QuestionnaireInput

QuestionnaireError

QuestionnaireActions

QuestionnairePrevious

QuestionnaireSkip

QuestionnaireNext

QuestionnaireSubmit

Composition

Metadata

Notas de acessibilidade

Classificação

Origem e distribuição

Acessibilidade

Dependências