Inputs

Usage examples, variants, sizes, states, and best practices.

Basic Input

Input Types

With Icons

Labels & Helpers

Enter your first and last name

We'll never share your email

Validation

Username already taken

States

This field is required

Full Width

This takes up the full container width

Input Intelligence & UX

Our standard input fields are designed for maximum accessibility and a smooth user experience. They automatically handle focus states, error display, and necessary ARIA attributes to ensure they are **perceivable, operable, and robust** for all users, including those using assistive technologies.

State Management:

  • **Automatic Focus Styles:** Clear visual indication on focus (keyboard or mouse).
  • **Controlled vs. Uncontrolled:** Supports both state management patterns seamlessly.
  • **Error Signaling:** Instantly shows error state (red border) based on validation props.

Accessibility & Behavior:

  • **ARIA Integration:** Automatically links `id` and `aria-describedby` to helper/error text.
  • **Keyboard Navigable:** Full support for `Tab` key focus and input interaction.
  • **Prefix/Suffix Support:** Allows adding icons or text inside the field without breaking alignment.