Validated Field
A required text field with accessible error messaging. Submit it empty and the field is marked `aria-invalid`, an alert appears with the error, that text becomes the field's accessible description (via `aria-describedby`), and focus moves to the field. Enter a value and submit, and the error clears and success is announced — error handling that screen-reader and keyboard users can actually follow (WCAG 3.3.1).
- Axe
- Focus
Preview
Installation
npx shadcn@latest add https://ui.publictheta.com/r/validated-field.jsonConformance
Verified against the @publictheta/ui-spec validated-field specification on both the React and vanilla reference implementations, across Chromium, Firefox, and WebKit.
- Axe — No WCAG 2 A/AA axe-core violations
- Focus — A visible focus indicator appears on keyboard focus (WCAG 2.4.7)
See the full conformance matrix across all components.