Input

Overview

The Input component is a production-ready text input for capturing user data. It supports 3 validation variants, 3 sizes, leading/trailing icons, a clearable option, and all standard HTML input types.

Installation

Install the component via the CLI in one command.

npx @work-rjkashyap/unified-ui add input

pnpm dlx @work-rjkashyap/unified-ui add input

npx @work-rjkashyap/unified-ui add input

bunx @work-rjkashyap/unified-ui add input

If you haven't initialized your project yet, run npx @work-rjkashyap/unified-ui init first. See the CLI docs for details.

Or install the full package

Use this approach if you prefer to install the entire design system as a dependency instead of copying individual components.

npm install @work-rjkashyap/unified-ui

pnpm add @work-rjkashyap/unified-ui

yarn add @work-rjkashyap/unified-ui

bun add @work-rjkashyap/unified-ui

Anatomy

import { Input } from "@work-rjkashyap/unified-ui";

Examples

Variants

<Input variant="default" placeholder="Default" />
<Input variant="error" placeholder="Error — validation failed" />
<Input variant="success" placeholder="Success — validation passed" />

<Input variant="default" placeholder="Default" /><Input variant="error" placeholder="Error — validation failed" /><Input variant="success" placeholder="Success — validation passed" />

Sizes

<Input size="sm" placeholder="Small (h-8)" />
<Input size="md" placeholder="Medium (h-9)" />
<Input size="lg" placeholder="Large (h-10)" />

<Input size="sm" placeholder="Small (h-8)" /><Input size="md" placeholder="Medium (h-9)" /><Input size="lg" placeholder="Large (h-10)" />

Size	Height	Font Size
`sm`	32px	12px
`md`	36px	14px
`lg`	40px	14px

With Icons

import { Search, Mail, User, Lock, Eye, Globe } from "lucide-react";

{/* Left icon */}

<Input iconLeft={<Search />} placeholder="Search..." />

{/* Right icon */}

<Input iconRight={<Mail />} placeholder="Email address" />

{/* Left icon */}

<Input iconLeft={<User />} placeholder="Username" />

{/* Both icons */}

<Input
iconLeft={<Lock />}
iconRight={<Eye />}
placeholder="Password"
type="password"
/>

{/* URL input with icon */}

<Input iconLeft={<Globe />} placeholder="https://example.com" />

import { Search, Mail, User, Lock, Eye, Globe } from "lucide-react";{/* Left icon */}<Input iconLeft={<Search />} placeholder="Search..." />{/* Right icon */}<Input iconRight={<Mail />} placeholder="Email address" />{/* Left icon */}<Input iconLeft={<User />} placeholder="Username" />{/* Both icons */}<InputiconLeft={<Lock />}iconRight={<Eye />}placeholder="Password"type="password"/>{/* URL input with icon */}<Input iconLeft={<Globe />} placeholder="https://example.com" />

States

<Input placeholder="Enabled" />
<Input disabled placeholder="Disabled" />
<Input readOnly value="Read-only value" />

<Input placeholder="Enabled" /><Input disabled placeholder="Disabled" /><Input readOnly value="Read-only value" />

Input Types

<Input type="text" iconLeft={<User />} placeholder="Text" />
<Input type="email" iconLeft={<AtSign />} placeholder="Email" />
<Input type="password" iconLeft={<Lock />} placeholder="Password" />
<Input type="number" iconLeft={<Hash />} placeholder="Number" />
<Input type="url" iconLeft={<Globe />} placeholder="https://example.com" />
<Input type="tel" iconLeft={<Phone />} placeholder="Phone number" />

<Input type="text" iconLeft={<User />} placeholder="Text" /><Input type="email" iconLeft={<AtSign />} placeholder="Email" /><Input type="password" iconLeft={<Lock />} placeholder="Password" /><Input type="number" iconLeft={<Hash />} placeholder="Number" /><Input type="url" iconLeft={<Globe />} placeholder="https://example.com" /><Input type="tel" iconLeft={<Phone />} placeholder="Phone number" />

With Error Message

Please enter a valid email address.

<label htmlFor="email-input" className="text-sm font-medium">
Email
</label>
<Input
id="email-input"
variant="error"
iconLeft={<Mail />}
placeholder="you@example.com"
aria-describedby="email-error"
/>
<p id="email-error" className="text-xs text-danger">
Please enter a valid email address.
</p>

<label htmlFor="email-input" className="text-sm font-medium">Email</label><Inputid="email-input"variant="error"iconLeft={<Mail />}placeholder="you@example.com"aria-describedby="email-error"/><p id="email-error" className="text-xs text-danger">Please enter a valid email address.</p>

With Success Message

Username

Username is available!

<label htmlFor="username-input" className="text-sm font-medium">
Username
</label>
<Input
id="username-input"
variant="success"
iconLeft={<User />}
value="unified_user"
aria-describedby="username-success"
/>
<p id="username-success" className="text-xs text-success">
Username is available!
</p>

<label htmlFor="username-input" className="text-sm font-medium">Username</label><Inputid="username-input"variant="success"iconLeft={<User />}value="unified_user"aria-describedby="username-success"/><p id="username-success" className="text-xs text-success">Username is available!</p>

Combined Features

This email is already taken.

Website

{/* Small search input */}
<Input size="sm" iconLeft={<Search />} placeholder="Search users..." />

{/* Error state with message */}

<Input iconLeft={<Mail />} variant="error" placeholder="you@example.com" />
<p className="text-xs text-danger">This email is already taken.</p>

{/* Large success input with both icons */}

<Input
size="lg"
iconLeft={<Globe />}
iconRight={<Link />}
variant="success"
value="https://unified-ui.dev"
/>

{/* Small search input */}<Input size="sm" iconLeft={<Search />} placeholder="Search users..." />{/* Error state with message */}<Input iconLeft={<Mail />} variant="error" placeholder="you@example.com" /><p className="text-xs text-danger">This email is already taken.</p>{/* Large success input with both icons */}<Inputsize="lg"iconLeft={<Globe />}iconRight={<Link />}variant="success"value="https://unified-ui.dev"/>

Props

Prop	Type	Default	Description
`variant`	`"default" \| "error" \| "success"`	`"default"`	Visual variant for validation state.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Size of the input. Matches Button height scale.
`iconLeft`	`ReactNode`	—	Icon displayed on the left side.
`iconRight`	`ReactNode`	—	Icon displayed on the right side.
`clearable`	`boolean`	`false`	Show a clear button when the input has a value.
`onClear`	`() => void`	—	Callback when the clear button is clicked.
`wrapperClassName`	`string`	—	CSS classes for the outer wrapper (when icons are used).
`disabled`	`boolean`	`false`	Disables the input.
`readOnly`	`boolean`	`false`	Makes the input read-only.
`className`	`string`	—	Additional CSS classes for the input element.

All standard <input> HTML attributes are also supported.

Accessibility

Always pair error/success variants with descriptive text linked via aria-describedby for screen reader users.

Error variant automatically sets aria-invalid="true" unless explicitly overridden.
Use aria-describedby to link the input to error/helper text elements.
Disabled inputs set both the disabled attribute and aria-disabled.
The clear button has aria-label="Clear input" and is excluded from tab order (tabIndex={-1}).
Focus ring is visible on keyboard navigation only (focus-visible).
Icons are marked aria-hidden="true" since they are decorative.

Design Tokens

The Input uses the following design system tokens:

Token	Usage
`--border`	Default border color
`--danger`	Error variant border
`--success`	Success variant border
`--muted-foreground`	Placeholder and icon color
`--disabled`	Disabled background
`--disabled-foreground`	Disabled text color
`--radius-md`	Border radius
`--duration-fast`	Transition speed for focus/hover
`--easing-standard`	Easing curve for transitions

On this page