Input

Text input with built-in label, error message, and hint support. Handles common form patterns with consistent HUD styling.

Variants

Preview

This field is required

Use your assigned codename

Props

PropTypeDefaultDescription
labelstring-Label text displayed above the input.
placeholderstring-Placeholder text shown when the input is empty.
errorstring-Error message displayed below the input.
hintstring-Hint text displayed below the input.
disabledbooleanfalseDisables the input and applies muted styling.
classNamestring-Additional CSS classes.

Accessibility

  • Renders a semantic <input> element with an associated <label>
  • The label prop automatically generates a linked htmlFor / id pair
  • Error messages are linked via aria-describedby and set aria-invalid="true"
  • Hint text is linked via aria-describedby for screen reader context
  • Disabled state applies aria-disabled alongside the native disabled attribute
  • Supports ref forwarding for DOM access