Input

A labelled text field built on React Aria - leading and trailing adornments, hint text, and required/invalid states with a cross-fading focus ring.

This is a hint about this input.

Installation

You can add this input component using our CLI or manually:

Dark mode ready - this component follows BoardUI semantic tokens automatically. Set up theme switching.

The CLI copies the component source (with its internal dependencies) into your project and installs any required npm packages.

npx boardui@latest add input

Sizes

This is a hint about this input.
This is a hint about this input.

States

This is a hint about this input.
This is a hint about this input.
This is a hint about this input.
This is a hint about this input.

Phone number

This is a hint about this input.
This is a hint about this input.