Input
atomSingle-line text field for names, emails, IDs, and free text. Supports label, placeholder, helper text, error state, and both controlled and uncontrolled usage.
Default
Basic input with label and placeholder.
With helper text
Helper text provides additional context below the field.
Error state
Red border and message for validation feedback.
Usage
Installation
API Reference
Input props — * required
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Label displayed above the input. |
size | "sm" | "md" | "lg" | "md" | Height, font size, and padding scale. |
type | string | "text" | HTML input type (text, email, password, etc.). |
placeholder | string | — | Hint text shown when the field is empty. |
value | string | — | Controlled value. |
defaultValue | string | — | Uncontrolled initial value. |
helperText | string | — | Hint or description below the input. |
errorText | string | — | Error message; triggers the error visual state. |
prefix | ReactNode | — | Inset label attached to the left of the field (e.g. "$", "https://"). |
suffix | ReactNode | — | Inset label attached to the right of the field (e.g. "kg", ".com"). |
disabled | boolean | false | Prevents interaction and mutes the appearance. |
onChange | (e: React.ChangeEvent<HTMLInputElement>) => void | — | Change event handler. |