UI
← Home

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.json

Conformance

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.