Input
Single-line text field with optional leading and trailing icons.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
type | string | "text" | HTML input type attribute. |
placeholder | string | — | Placeholder text when the field is empty. |
value | string | — | Controlled value. |
onChange | ChangeEventHandler<HTMLInputElement> | — | Change handler. |
leftIcon | ReactNode | — | Slot before the text, inside the control border. |
rightIcon | ReactNode | — | Slot after the text, inside the control border. |
size | "sm" | "md" | "md" | Control height. |
invalid | boolean | — | Invalid styling. Defaults to the enclosing Field error state. |
disabled | boolean | — | Prevents interaction and applies disabled styling. |
readOnly | boolean | — | Non-editable but focusable. |
mono | boolean | — | Monospace font. |
containerClassName | string | — | Targets the shell (border, height, icons); className targets the <input>. |
Usage
Input renders a native <input> inside the shared Control shell, giving it the same border, background, and focus ring as all other form controls. Pass leftIcon or rightIcon to place an icon inside the control border.
Basic
With icons
Invalid
Disabled
Mono
Sizes
import { Input } from "@solarius/onset";
import type { InputProps } from "@solarius/onset";
import { IconSearch, IconUser } from "@tabler/icons-react";
<Input placeholder="Search..." leftIcon={<IconSearch size={13} />} />
<Input placeholder="API key" mono value="sk_live_abc123" readOnly />
<Input placeholder="Small" size="sm" />