Input
A styled text input that reads border, radius, and focus tokens from your token file.
Import
import { Input } from "@sigil-ui/components";Preview
Usage
<Input placeholder="Enter your email" />With label
Pair with a <label> or the Label component for accessibility:
import { Input, Label, Stack } from "@sigil-ui/components";
<Stack gap={8}>
<Label htmlFor="name">Full name</Label>
<Input id="name" placeholder="Lina Torres" />
</Stack>With icons
Use iconLeft and iconRight to render elements inside the input.
import { Search, Eye } from "lucide-react";
<Input iconLeft={<Search className="size-4" />} placeholder="Search..." />
<Input iconRight={<Eye className="size-4" />} placeholder="Password" type="password" />Error state
Pass a string to error to show both the error styling and an error message. Pass true for styling only.
<Input error="Please enter a valid email address" placeholder="you@example.com" />
<Input error={true} placeholder="Error styling, no message" />Disabled
<Input disabled placeholder="Disabled input" />Token integration
Input reads these CSS variables from your token file:
| CSS Variable | Used for |
|---|---|
--s-background | Input background |
--s-text | Input text color |
--s-text-muted | Placeholder color |
--s-border | Default border |
--s-border-style | Border style |
--s-primary | Focus border and ring |
--s-error | Error state border and message |
--s-radius-input | Border radius |
--s-duration-fast | Focus transition |
Props
| Prop | Type | Default | Description |
|---|---|---|---|
error | string | boolean | — | Error state. String shows a message below the input. |
iconLeft | ReactNode | — | Icon or element on the left |
iconRight | ReactNode | — | Icon or element on the right |
disabled | boolean | false | Disable interactions |
className | string | — | Additional CSS classes |
Plus all standard <input> HTML attributes (type, placeholder, value, onChange, etc.).
Accessibility
- Uses native
<input>element - Pair with
<label>using matchinghtmlFor/idfor screen reader support - Error state adds
aria-invalid="true" - Error message renders with
role="alert" - Disabled state uses the native
disabledattribute