Input
Text entry field and its variants: Textarea, Password Input, Search Input, Number Input, and OTP Input. All share the same sizes, states, and focus behavior.
Sizes
sm / md / lg.
With icon slot
Clearable
clearable adds a clear button once the field has a value.
- Clearing fires a native input event, so onChange sees it whether the value is controlled or not
- The clear button renders after endSlot when both are given
States
Invalid, disabled, and read-only.
- size accepts sm | md | lg (default md)
- invalid, disabled, and readOnly are plain boolean props, all composable
- startSlot / endSlot accept any ReactNode: icons, currency symbols, unit labels
Textarea
Resizable multi-line text input with the same border, focus, and invalid states as Input.
Password Input
Adds a show/hide visibility toggle button.
Search Input
Adds a search icon and a clear button once there's a value.
Number Input
Increment/decrement steppers (wraps Base UI NumberField).
OTP Input
One-time-code entry with individually-focusable character slots.
- Arrow keys and paste both move focus across slots correctly
API reference
Shows an unboxed "X" button once there is a value. Sets the DOM value and fires a native `input` event, so `onChange` sees it whether controlled or not. Coexists with `endSlot`.
Content rendered inside the field, after the text.
Manually flags the invalid visual/aria state for standalone use outside a FormField.
Control height and padding, matching `Button` at the same value.
Content rendered inside the field, before the text (icon, currency symbol).
Also accepts everything from Omit<React.ComponentPropsWithoutRef<typeof import("@base-ui/react/input").Input>, "size">.
Coding agents read this reference, with its examples, from the version your project has installed, through the Fuji UI MCP server. Set up your agent