Infrastructure Type Selector

A multi-select molecule for categorizing damaged infrastructure. Composes Checkbox atoms in a grid layout with 7 pre-configured infrastructure categories, each with a description to help field reporters classify affected structures.

Preview — No Selection

Infrastructure type

Commercial

Markets, shops, hotels, banks

Government

Administrative buildings, courthouses

Utility

Power lines, water, telecommunications

Transport

Roads, bridges, airports

Community

Schools, hospitals, religious buildings

Public/Recreation

Parks, stadiums, cultural sites

Other

Any structure not listed above

Preview — Pre-selected

Infrastructure type

Commercial

Markets, shops, hotels, banks

Government

Administrative buildings, courthouses

Utility

Power lines, water, telecommunications

Transport

Roads, bridges, airports

Community

Schools, hospitals, religious buildings

Public/Recreation

Parks, stadiums, cultural sites

Other

Any structure not listed above

States

Required with error

Infrastructure type

Commercial

Markets, shops, hotels, banks

Government

Administrative buildings, courthouses

Utility

Power lines, water, telecommunications

Transport

Roads, bridges, airports

Community

Schools, hospitals, religious buildings

Public/Recreation

Parks, stadiums, cultural sites

Other

Any structure not listed above

Select at least one infrastructure type.

Accessibility

Uses <fieldset> with <legend> for semantic grouping.
Each checkbox has a visible label and description text.
Required state is communicated via aria-required on the fieldset.
Error messages use role="alert".

Trauma-Informed Design

Descriptions help reporters who may not know technical infrastructure classifications.
Multi-select allows reporting damage to multiple infrastructure types in a single report.
Two-column grid layout keeps all options visible without scrolling on most devices.
Large checkbox touch targets accommodate field use with gloves or trembling hands.