Input
Text fields that collect user-entered values. Supports labels, hint text, error states, leading / trailing icons, and compound add-ons for phone numbers, currencies, and URL prefixes.
Sizes
Three sizes that align with the button height scale — sm, md (default), and lg.
States
Default, focused (click to see the violet ring), and disabled. Error state is covered in the Validation section below.
Default
Disabled
Read-only
Label & hint text
An optional label renders above the field and description renders a gray hint below.
Label only
Label + hint
This is a hint text to help user.
Required
Validation
Pass an errorMessage to switch the field into its error state — red border, error icon, and red message.
Error state
This is an error message.
Error with label
This is an error message.
Error — all sizes
This is an error message.
This is an error message.
This is an error message.
Leading & trailing icons
Use startContent for a leading icon and endContent for a trailing icon. The trailing slot is replaced by the error icon when errorMessage is set.
Leading icon
Trailing icon
Both icons
Search
Password
Leading icon + error
This is an error message.
Icons + hint
This is a hint text to help user.
Add-ons
Attach contextual controls with leadingAddOn and trailingAddOn. These are rendered inside the same bordered container with a thin divider.
Phone number
This is a hint text to help user.
Phone — error state
This is an error message.
Sale amount
This is a hint text to help user.
Website URL
This is a hint text to help user.
Username
Variants
Four surface styles for different design contexts.
Bordered (default)
Flat
Faded
Underlined
Textarea
Multi-line text input sharing the same visual language as Input. Resize behaviour is configurable via the resize prop.
Default
This is a hint text to help user.
Error state
This is an error message.
Disabled
No resize
Mega Input
Large single-character cells for OTP / PIN entry. Compose multiple MegaInput elements side by side for a complete code field.
Sizes
States — medium
6-digit OTP example