Input

Capture user data. Built-in validation states. Error prevention.

1import { Input } from '@/components/ui/input';
2
3export function Default() {
4  return (
5    <div className="w-full max-w-sm">
6      <Input aria-label="Workspace name" placeholder="Northwind Labs" />
7    </div>
8  );
9}

Installation

pnpm dlx nachui add input

Anatomy

1import { Input } from '@/components/ui/input';

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

Variants

Default

1import { Input } from '@/components/ui/input';
2
3export function Default() {
4  return (
5    <div className="w-full max-w-sm">
6      <Input aria-label="Workspace name" placeholder="Northwind Labs" />
7    </div>
8  );
9}

With Label

Input with a built-in label using the label prop.

Work emailInvoices and deploy alerts are sent here.

1import { Input } from '@/components/ui/input';
2
3export function WithLabel() {
4  return (
5    <div className="w-full max-w-sm">
6      <Input
7        label="Work email"
8        description="Invoices and deploy alerts are sent here."
9        placeholder="you@northwindlabs.com"
10        type="email"
11      />
12    </div>
13  );
14}

With Error

Validation error state with accessible error messaging.

Invite a teammate

They get access to the Northwind Labs workspace.

Work email

Enter a full address, like marco@northwindlabs.com

1import { Button } from '@/components/ui/button';
2import { Input } from '@/components/ui/input';
3
4export function WithError() {
5  return (
6    <div className="border-border bg-card flex w-full max-w-sm flex-col gap-4 rounded-xl border p-5">
7      <div>
8        <p className="text-sm font-medium">Invite a teammate</p>
9        <p className="text-muted-foreground text-xs">
10          They get access to the Northwind Labs workspace.
11        </p>
12      </div>
13      <Input
14        label="Work email"
15        type="email"
16        defaultValue="marco@northwind"
17        error="Enter a full address, like marco@northwindlabs.com"
18      />
19      <Button size="sm" className="self-start">
20        Send invite
21      </Button>
22    </div>
23  );
24}

With Icons

Input with left and/or right icon slots.

Password

1import { Search01Icon, ViewIcon } from '@hugeicons/core-free-icons';
2import { HugeiconsIcon } from '@hugeicons/react';
3import { Input } from '@/components/ui/input';
4
5export function WithIcon() {
6  return (
7    <div className="flex w-full max-w-sm flex-col gap-4">
8      <Input
9        aria-label="Search customers"
10        placeholder="Search customers and invoices"
11        leftIcon={<HugeiconsIcon icon={Search01Icon} size={16} />}
12      />
13      <Input
14        label="Password"
15        type="password"
16        placeholder="At least 12 characters"
17        rightIcon={<HugeiconsIcon icon={ViewIcon} size={16} />}
18      />
19    </div>
20  );
21}

Sizes

Three size variants: sm, default, and lg.

Coupon code

Project name

1import { Input } from '@/components/ui/input';
2
3const fields = [
4  { size: 'sm' as const, label: 'Coupon code', placeholder: 'SPRING25' },
5  { size: 'default' as const, label: 'Project name', placeholder: 'Checkout redesign' },
6  { size: 'lg' as const, label: 'Search', placeholder: 'Search orders, customers, invoices' },
7];
8
9export function Sizes() {
10  return (
11    <div className="flex w-full max-w-sm flex-col gap-4">
12      {fields.map((field) => (
13        <Input
14          key={field.size}
15          size={field.size}
16          label={field.label}
17          placeholder={field.placeholder}
18        />
19      ))}
20    </div>
21  );
22}

Disabled

A disabled state prevents all interactions.

Billing emailOnly the workspace owner can change this address.

1import { Input } from '@/components/ui/input';
2
3export function Disabled() {
4  return (
5    <div className="w-full max-w-sm">
6      <Input
7        label="Billing email"
8        description="Only the workspace owner can change this address."
9        type="email"
10        defaultValue="billing@northwindlabs.com"
11        disabled
12      />
13    </div>
14  );
15}

Compound Components

The Input also exposes sub-components for custom layouts:

1<Input.Wrapper>
2  <Input.Label htmlFor="custom">Custom Layout</Input.Label>
3  <Input.Description>Helper text goes here.</Input.Description>
4  <input id="custom" />
5  <Input.Error>Something went wrong.</Input.Error>
6</Input.Wrapper>

API Reference

Input

Prop	Type	Default	Description
`label`	`string`	—	Label text rendered above the input.
`error`	`string`	—	Error message displayed below the input.
`description`	`string`	—	Helper text displayed between the label and input.
`size`	`"sm"` \| `"default"` \| `"lg"`	`"default"`	The size of the input field.
`leftIcon`	`React.ReactNode`	—	Icon displayed on the left side of the input.
`rightIcon`	`React.ReactNode`	—	Icon displayed on the right side of the input.
`disabled`	`boolean`	—	Disables the input.
`className`	`string`	—	Additional CSS class names.
`type`	`string`	`"text"`	The type of the input element.

Input.Wrapper

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS classes.
`children`	`React.ReactNode`	—	The wrapper content.

Input.Label

Prop	Type	Default	Description
`htmlFor`	`string`	—	Associates with an input.
`className`	`string`	—	Additional CSS classes.

Input.Description

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS classes.
`children`	`React.ReactNode`	—	The description text.

Input.Error

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS classes.
`children`	`React.ReactNode`	—	The error message.

Found something to improve?

Notice a bug, typo, or missing detail on this page? Help us make the documentation better by opening a GitHub issue.

Create an Issue

PreviousIcon Tile

NextKbd