Text Input
Single-line text fields for names, addresses, GPS coordinates, and search queries in damage assessment forms.
Preview — Default with Help Text
Enter the commonly used name for this infrastructure.
Preview — Error State
Please enter the infrastructure name so we can locate it.
States
Default
Required
Disabled
Readonly
Accessibility
- Labels are linked via
for/idattributes. - Help text and errors are linked via
aria-describedby. - Error state sets
aria-invalid="true"and error messages userole="alert". - Required fields show
aria-required="true"and a visual asterisk. - Readonly fields announce
aria-readonly="true".
Trauma-Informed Design
- Error messages are phrased as helpful guidance, not blame: "Please enter..." not "You forgot..."
- Help text provides concrete examples to reduce decision fatigue.
- Input height is 48px — large enough for shaky or wet fingers.
- Placeholder text is light (slate-400) to avoid confusion with entered values.