Components

Input

A styled text input with optional label, hint/error messaging, and icon addons. Supports all native input types.

Basic usage

Pass a label for accessible form fields. Without a label, ensure you provide an aria-label.

With addons

Use leftAddon or rightAddon to place icons inside the input bounds.

States

Provide feedback with hint or error. Disabled inputs reduce opacity and block interaction.

We'll never share your email.

This field is required.

Props

PropTypeDefaultDescription
labelstring—Label text displayed above the input.
errorstring—Error message displayed below. Adds red styling.
hintstring—Helper text displayed below (hidden when error present).
leftAddonReact.ReactNode—Icon or element rendered inside the left edge.
rightAddonReact.ReactNode—Icon or element rendered inside the right edge.
...restInputHTMLAttributes—All native input props are forwarded.

Accessibility

  • Label is automatically associated via htmlFor.
  • aria-invalid is set when error is provided.
  • Hint/error messages are linked via aria-describedby.
  • Focus ring uses the brand gold ring token, visible on keyboard navigation.