Components / forms

forms · @awesome-ds/react

Input

Labeled text field with hint and error association.

Rules: rule.a11y.wcag-aa, rule.components.state-matrix

State matrix

idlerequired
focusrequired
disabledrequired
errorrequired

Anatomy

  • label
  • text input
  • hint
  • error message

Keyboard contract

Uses native text editing, selection, and Tab order.

Screen-reader contract

Label, hint, invalid state, and error are programmatically associated.

Content rules

  • Labels describe the requested value.
  • Errors explain how to recover.

Public API

PropTyperequiredDescription
idstringrequiredAssociation identifier
labelstringrequiredField name
hintstring—Associated supporting guidance
errorstring—Associated recovery message
…nativeInputHTMLAttributes<HTMLInputElement>—Native input attributes

Adaptation contracts

RTL
Keep label, input, hint, and error aligned to inline-start without changing DOM order.
High contrast
Use system field borders, focus indicators, and non-color invalid cues.
Reduced motion
Change validation and selection states without sliding or spring motion.

Verification IDs

Input/label-error-association

Live

Live

We never share this

Copyable example

import { Input } from "@awesome-ds/react";

<Input id="email" label="Email" error="Required" />