Select

Native dropdown menus for choosing infrastructure types, sort orders, and filter criteria. Uses the platform-native select for maximum mobile usability.

Preview — With Placeholder

Sort by

Preview — Pre-Selected Value

Infrastructure type

Select the type of infrastructure affected.

States

Error

District

Please select a district to continue.

Disabled

Country

Accessibility

Uses native <select> element for maximum screen reader and mobile compatibility.
Placeholder option uses disabled selected so it cannot be re-selected after choosing.
Custom chevron icon is hidden with pointer-events-none and aria-hidden.
Error and help text linked via aria-describedby.

Trauma-Informed Design

Uses platform-native dropdown for familiarity — no custom dropdown menus that may confuse users.
48px height maintains consistent touch target with other form elements.
Placeholder text starts with "Select..." to clearly indicate the expected action.
Short option lists reduce scrolling and decision fatigue.