Input
Displays a form input field or a component that looks like an input field.
Last updated: March 7, 2026
This component is currently being updated with more polished variants.
Basic Input
Default and disabled input states.
Clearable Input
An input with an inline clear action that resets and refocuses the field.
Outlined Input
Clean bordered input for standard forms.
Filled Input
Muted filled style for dense layouts.
Ghost Input
Low-emphasis dashed style for secondary fields.
Search Input
Input with a leading search icon.
Password Toggle Input
Password field with show/hide toggle.
Error State Input
Validation error style with inline helper message.
Only letters, numbers, and hyphens are allowed.
Success State Input
Validation success style with inline confirmation.
Looks good, this email is available.
Floating Label Input
Input with a floating label treatment.
Compact Input
Small-height input for tight interfaces.