Design System

Question group

Container primitive that groups a related set of form fields. Replaces the ad-hoc onboarding-question-group div soup in the legacy intake. Purely presentational — the form-engine decides whether to render it (visibility rules live on the spec).

Three layouts: stack (vertical, default), grid-2col (two equal columns, collapses to stack on mobile), cluster (tight grouping with reduced gap, e.g. an identity cluster).

import from @halwel/ui/components/forms/QuestionGroup

API: <QuestionGroup label? description? layout?>{fields}</QuestionGroup>. Header (label + description) is optional and only renders if either is provided.

Variants

Stack (default)

Contact information

How should we reach you?

+1

Grid-2col

Basic identity

Two equal columns at desktop, collapses to stack at <768.

Cluster — tight rhythm
ft

lb

12px gap instead of 16px. For visually unified groups (BMI cluster, name+name).

No header