Preview

Import

import { Input } from "@sigil-ui/components";

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 matching htmlFor/id for screen reader support
Error state adds aria-invalid="true"
Error message renders with role="alert"
Disabled state uses the native disabled attribute

On this page