Component

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

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

Prop	Type	Default	Description
startSlot / endSlot	ReactNode	None	Inline leading or trailing affordances.
invalid	boolean	false	Shows the invalid field state.
type	native input type	"text"	Text, email, number, and related input modes.
className	string	None	Additional classes applied to the component root.

startSlot / endSlotNone

ReactNode

Inline leading or trailing affordances.

invalidfalse

boolean

Shows the invalid field state.

type"text"

native input type

Text, email, number, and related input modes.

classNameNone

string

Additional classes applied to the component root.