Input

Inputs

Stablev1.0.0

Text input with validation, icon support, and accessible states.

Preview

Installation

pnpm add @component-labs/ui

Usage

import { Input } from "@component-labs/ui";

<Input placeholder="Enter your email" />

Props

Name	Type	Default	Description
`variant`	`'default' \| 'outline' \| 'error'`	`'default'`	Visual style variant
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size of the input
`label`	`ReactNode`	`-`	Label text above the input
`helperText`	`ReactNode`	`-`	Helper text below the input
`error`	`string`	`-`	Error message (automatically sets variant to error)
`startIcon`	`ReactNode`	`-`	Icon to display before the input text
`endIcon`	`ReactNode`	`-`	Icon to display after the input text
`placeholder`	`string`	`-`	Placeholder text
`disabled`	`boolean`	`false`	Whether the input is disabled

Examples

Basic Input

Simple text input

<Input placeholder="Enter your email" />

With Label

Input with label

<Input
  label="Email Address"
  placeholder="you@example.com"
  type="email"
/>

With Helper Text

Input with helper text

<Input
  label="Username"
  helperText="Must be unique and at least 3 characters"
  placeholder="johndoe"
/>

With Error

Input with error state

<Input
  label="Email"
  error="Please enter a valid email address"
  value="invalid-email"
/>

With Icons

Inputs with start and end icons

<div className="space-y-4">
  <Input
    label="Search"
    placeholder="Search..."
    startIcon={<SearchIcon />}
  />
  <Input
    label="Password"
    type="password"
    endIcon={<EyeIcon />}
  />
</div>

Sizes

Different input sizes

<div className="space-y-4">
  <Input size="sm" placeholder="Small input" />
  <Input size="md" placeholder="Medium input" />
  <Input size="lg" placeholder="Large input" />
</div>

Disabled State

Disabled input

<Input
  label="Disabled Input"
  placeholder="Cannot edit"
  disabled
/>

Performance

Bundle Size

~2kB gzipped

Minified and gzipped

Dependencies

•class-variance-authority

Accessibility

•Proper label association with input
•ARIA attributes for error states
•Focus visible states with ring indicator
•Disabled state prevents interaction
•Helper text announced by screen readers