Checkbox

Multi-select inputs for infrastructure types, affected services, and confirmation agreements. Each checkbox is a self-contained label-input pair with optional description.

Preview — Multi-Select Infrastructure Type

Affected infrastructure types

Road or highway

Paved or unpaved road surface

Bridge or overpass

Spanning a river, valley, or road

Water supply

Pipes, pumps, or treatment facility

Preview — Single Confirmation

I confirm this report is accurate to the best of my knowledge

States

Checked

Active option

Unchecked

Inactive option

Disabled

Cannot be changed

Accessibility

Each checkbox has a unique id derived from name + value.
The entire label row is clickable, not just the checkbox input.
Selected state is visually indicated with rapida-blue border and background via has-[:checked].
Required checkboxes set aria-required="true".
Disabled state adds opacity-40 and pointer-events-none.

Trauma-Informed Design

Large touch area (full row) accommodates stressed, shaky input.
Descriptions help users understand options without external reference.
Confirmation checkboxes use plain language: "I confirm..." not legalese.
Multi-select lists reduce form steps — one screen instead of multiple.