Toggle
On/off switches for map layer visibility, settings preferences, and binary options that take effect immediately without form submission.
Preview — Off State
Satellite view
Switch map to satellite imagery for better damage visibility
Preview — On State
Building footprints
Show building outlines from OpenStreetMap data
States
Off
Offline mode
On
Offline mode
Disabled
GPS tracking
Requires location permission
Accessibility
- Uses
role="switch"with dynamicaria-checked. - Label linked via
aria-labelledbypointing to the labelid. - Keyboard activation: Space key toggles the switch.
- Hidden input syncs the boolean value for form submission.
- Disabled state sets
aria-disabled="true"andpointer-events-none.
Trauma-Informed Design
- Toggles are used for settings that take immediate effect — no "Save" step needed.
- Clear on/off color states: rapida-blue-700 for on, slate-300 for off.
- Descriptions explain what the toggle does, reducing uncertainty.
- Smooth 200ms transition provides tactile feedback without disorienting animation.