Input Fields
Text inputs, search, and phone number components
FloatingLabelInput
Tall input (64px) with an animated floating label. Used in onboarding and settings forms.
Default (empty)
Prefilled
With error
Please enter a valid email address
With helper text
Include https://
Password with toggle
Disabled
Required
Input
Standard input with a label above. Uses semantic design tokens. Shorter (40px) than FloatingLabelInput.
Default
With error
Please enter a valid email address
Disabled
Required
FormField + BaseInput
Compose FormField around any input to add label, helper text, and error handling. Use when you need a custom input slot.
Default
With helper text
Letters and numbers only
With error
Username is already taken
Required
Found in your account settings
SearchInput
Search field with a leading search icon. Used in headers and filter bars.
Default
PhoneNumberInput
Auto-formats to (###) ###-#### as the user types. Validates on blur. Floating label variant.
Default
With error
Please enter a valid 10-digit phone number
Prefilled
Disabled