Questionnaire step

Questionnaire step — one question of a form taken in steps: the site’s lead-form card with a step line, a title, one or two fields, an optional consent and Back / Next.

Beta · Forms · packages/css/src/components/questionnaire.css

.pui-questionnaire-step · __heading __title __description __fields __actions — a Progress, one or two Fields, a consent, Back / Next.

Questionnaire step — every size and every stateOpen in the workshop

Sizes across, states down.

What it is for

• Title, Description + Has description; Progress exposed — its caption is the step line (‘Step 2 of 4’) and its value the share (four steps on 25 / 50 / 75 / 100)
• Field 1 and Field 2 exposed (Has field 2); their labels, controls and errors edit through the chain
• Has consent: the site’s checkbox row (‘I agree to the privacy policy’), on the last step
• Has back: off on the first step; Next is exposed — its label reads ‘Submit’ on the last step

Use when a lead or intake form has more than four or five fields, or asks things that belong to different subjects — one subject per step, three to six steps.

Do not use when the form fits one card (the site’s form card — Card with Fields); the steps have names and a user may jump between them (Stepper); the answers change what is asked next in ways a bar cannot show (a flow, not a form).

Relates to Field, Input, Checkbox, Radio, Progress, Stepper, Button, Button - secondary, Card.

Anti-patterns a step with no way back after the first · a bar that jumps by different amounts per step · ‘Next’ on the last step · a required mark instead of the word (Writing rules) · a fill changed on the instance.

Keywords: questionnaire, multi-step form, wizard, lead form, intake, steps

Figma — page Questionnaire: Questionnaire step (1 variants)

shadcn: questionnaire

The markup — copy this

The class, the parts, and nothing that is not in the package. The same block opens questionnaire.css.

<form class="pui-questionnaire-step">
  <div class="pui-progress pui-progress--labelled">…</div>
  <div class="pui-questionnaire-step__heading"><h2 class="pui-questionnaire-step__title">About your company</h2>
    <p class="pui-questionnaire-step__description">…</p></div>
  <div class="pui-questionnaire-step__fields"> …pui-field… </div>
  <label class="pui-checkbox">…</label>
  <div class="pui-questionnaire-step__actions"><button class="pui-button pui-button--secondary">Back</button>
    <button class="pui-button">Next</button></div></form>

Rules — Back off on the first step; ‘Submit’ on the last, never ‘Next’; the bar moves in equal steps.

Accessibility — measured, not assumed

Every number here is measured on the rendered component: contrast (npm run contrast:render), the focus ring (npm run focus) and the keyboard (npm run keyboard). The floors are principle 12’s.

Contrast

ink on ground	reads	floor	the matrix calls it
#544d4d on #f2f2f7	7.39	4.5	text.muted on surface.card (promised)	ok
#544d4d on #ffffff	8.24	4.5	text.muted on surface.page (promised)	ok
#0b0202 on #f2f2f7	18.38	4.5	text.default on surface.card (promised)	ok
#0b0202 on #ffffff	20.51	4.5	text.default on surface.page (promised)	ok
#ffffff on #0b0202	20.51	4.5	Primary button label (promised)	ok

5 distinct pair(s) rendered, 0 that axe calls a violation.

The focus ring

5 of 5 focus stop(s) in this block meet WCAG 2.4.13 on screen — the same crop screenshotted focused and unfocused, and the difference measured.

Keyboard

Nothing in this component claims an ARIA role with a keyboard contract; its controls are ordinary ones and the browser already gives them their keys.

Tab order across the whole library is document order over 344 stops, and Shift+Tab is its exact reverse — no keyboard trap anywhere (WCAG 2.1.2).