Input
Single-line text fields with labels, icons, add-ons, and validation states.
Default
A bare text field with placeholder text.
With label
An input paired with an associated label.
Required
Marks the field as required for the user.
Disabled
A non-interactive, dimmed field.
Default value
Pre-populated with an initial value.
Helper text
Supporting text below the field for guidance.
We'll only use this to send peak demand alerts.
Error state
Invalid styling with an inline error message.
This email is invalid.
Start icon
A leading icon rendered inside the field.
Start add-on
A fixed prefix segment joined to the input.
End add-on
A fixed suffix segment joined to the input.
Inline add-ons
Prefix and suffix add-ons on the same field.
Password with toggle
A password field with a show/hide toggle.
File input
A styled file-selection control.
Clearable
A clear button appears once text is entered.
Search with loader
A search field showing a loading spinner.
Stepper (plus / minus)
A numeric input with increment and decrement buttons.
OTP
A segmented one-time-passcode entry field.
Phone number
A phone field with a country-code selector.
API reference
A single-line text field with focus, disabled, and invalid states.
Full props on Base UI InputInput | Styled text input element. |