Input
A text input field. Supports leading icons, trailing elements, and specialized variants like PasswordInput, EmailInput, and SearchInput.
Installation
Props
Extends all standard HTMLInputElement props.
| Prop | Type | Default | Description |
|---|---|---|---|
type | string | "text" | HTML input type. Certain types (password, email, search) auto-add icons and behaviors. |
icon | React.ReactNode | — | Custom leading icon. Overrides the auto-detected icon. |
trailing | React.ReactNode | — | Trailing element shown on the right side of the input. |
validationTone | "none" | "positive" | "destructive" | "none" | Applies a positive or error border/ring for validation feedback. |
size | "default" | "lg" | "default" | Control height and text size. |
attachment | "none" | "start" | "middle" | "none" | Flattens an edge so the input can sit flush within an input group. |
textStyle | "default" | "mono" | "default" | Use a monospaced face for the value (e.g. codes, tokens). |
textAlign | "left" | "center" | "left" | Horizontal alignment of the value. |
placeholder | string | — | Placeholder text. |
disabled | boolean | false | Disables the input. |