Selection
Checkbox Interactive
A full-width card that wraps a Checkbox and a label. The whole row is the click target, with a red border when checked and a raised shadow on hover.
Checkbox Interactive turns a Checkbox and its label into one large, tappable card. It suits multiple-choice prompts where each option is a full sentence — in the source file, a list of things a parent might be worried about.
Clicking anywhere on the row toggles the checkbox. The card signals selection with a red border and hover with a stronger shadow, so the choices feel like discrete objects rather than form rows.
It fills the width of its container. In Figma it is drawn at 472px wide.
Do
- Use it for short, self-contained statements a person can tick — the source file uses it for a list of parent worries.
- Stack several with 12–16px between them so each reads as its own option.
- Keep the label to a line or two; the row grows to fit, but long paragraphs read poorly in a card.
Don't
- Don't put links or buttons inside the label — the whole row is already a single click target.
- Don't use it for dense form lists where plain Checkboxes with labels save space.