UI Components

Input

A text input with label, helper text, error state, and icon slot support

Quick Preview

Email address

We'll never share your email.

Structure

Anatomy of the Input component — every optional layer is labeled.

Label (optional)

leftIcon

Input field · value / placeholder

rightIcon

helperText (optional)

errorText (optional)

Input field — core elementIcon slots — leftIcon / rightIconLabel — optionalerrorText — replaces helperText

States

Click inside any cell to focus the input and observe the live focus ring.

Input — all states

Click inside each cell to trigger the live focus state

6 states

Username

Default

Empty — resting

Username

Filled

Value entered

Username

Focus

↑ Click to focus

Invalid email address

Error

errorText is set

Password

Must include a number

With helper

helperText guidance

API key

Disabled

Cannot interact

Sizes

Three size tokens — sm md (default) lg.

Sizes — sm / md / lg

Click each input to compare focus ring sizes

3 states

Small

Small — sm

px-3 py-1.5 text-sm

Medium

Medium — md

px-4 py-2.5 text-sm · default

Large

Large — lg

px-4 py-3 text-base

Installation

// Copy the Input component from
src/components/ui/Input.tsx

Usage

import { Input } from '@/components/ui/Input'

export default function Example() {
  return (
    <Input
      label="Username"
      placeholder="Enter username"
      helperText="Min 3 characters"
    />
  )
}

Examples

With Icons

Password

Prompt Preview

Copy a prompt that recreates this UI

Paste this into your AI coding assistant to generate code that closely matches the reference, including color, size, shape, typography, spacing, and polish.

Copy-ready AI prompt

Starts from the current visual reference and project constraints.

Build a ui component named Input in React/Next.js.
Goal: recreate the same overall UI and behavior as the Input reference from a component gallery.
What it needs to communicate: A text input with label, helper text, error state, and icon slot support.

Project constraints:
- Use Next.js 16.2.6 with the App Router, React 19, TypeScript strict mode, and Tailwind CSS v4.
- Do not create a tailwind.config.js file. Use Tailwind v4 utilities and CSS variables where design tokens are needed.
- If you are implementing this inside the same project, use the Prompt font via next/font/google. If not, use the closest equivalent typeface.
- Return production-ready code with imports, responsive behavior, keyboard accessibility, and polished empty, hover, focus, active, and disabled states where relevant.
- Match the reference closely: color palette, spacing scale, border radius, shadows, icon scale, typography hierarchy, and motion timing.

Component-specific expectations:
- Keep the API concise and reusable.
- Make visual states feel polished and consistent across variants and sizes.
- Avoid unnecessary dependencies unless the behavior truly requires them.
- No explicit color literals were found in the examples. Match the live reference and the project accent color when appropriate.

Props to support:
- label: string — Label text above the input
- helperText: string — Helper text below the input
- errorText: string — Error message — replaces helperText and applies error styling
- size: "sm" | "md" | "lg" — default "md" — Size of the input
- leftIcon: React.ReactNode — Icon on the left inside the input
- rightIcon: React.ReactNode — Icon on the right inside the input
- disabled: boolean — Disable input interactions

Reference usage patterns:
- Basic Input

```tsx
<Input label="Email" placeholder="you@example.com" />
```

- Error State

```tsx
<Input label="Email" errorText="Invalid email" value="bad" />
```

Feature expectations:
- ForwardRef support
- Accessible label/input association via id
- Error state with aria-invalid + aria-describedby
- Left and right icon slots
- Three sizes (sm, md, lg)
- Primary color focus ring

Output requirements:
- Return complete code, not pseudocode.
- Include all necessary imports and helper types.
- Keep the implementation accessible, responsive, and visually finished.
- Match the reference for color, size, shape, typography, spacing, and interaction states as closely as possible.
- If multiple files are needed, organize them cleanly and explain the file structure briefly.

Tweak only product-specific copy or data after the first generation pass.

Props

Extends all native <input> attributes.

Prop	Type	Default	Description
`label`	`string`	-	Label text above the input
`helperText`	`string`	-	Helper text below the input
`errorText`	`string`	-	Error message — replaces helperText and applies error styling
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Size of the input
`leftIcon`	`React.ReactNode`	-	Icon on the left inside the input
`rightIcon`	`React.ReactNode`	-	Icon on the right inside the input
`disabled`	`boolean`	-	Disable input interactions

Features

✓ForwardRef support
✓Accessible label/input association via id
✓Error state with aria-invalid + aria-describedby
✓Left and right icon slots
✓Three sizes (sm, md, lg)
✓Primary color focus ring