Input

Collect a short value from a user.

Purpose

Collect a short value from a user.

When to use

Collect short free-form text.
Accept an email address or search term.

When not to use

Use a select for fixed choices.
Use a textarea for longer text.

Install

pnpm dlx shadcn@4.23.0 add @kaotypr-ui/input

Examples

With help

Use your work email.

import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

export function InputWithHelp() {
  return (
    <div className="grid max-w-sm gap-2">
      <Label htmlFor="example-email">Email</Label>
      <Input id="example-email" aria-describedby="example-help" />
      <p id="example-help">Use your work email.</p>
    </div>
  );
}

Invalid

Enter a valid email address.

import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

export function InputInvalid() {
  return (
    <div className="grid max-w-sm gap-2">
      <Label htmlFor="example-invalid">Email</Label>
      <Input
        id="example-invalid"
        aria-invalid
        aria-describedby="example-error"
        defaultValue="invalid"
      />
      <p id="example-error">Enter a valid email address.</p>
    </div>
  );
}

Disabled

Account ID

import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

export function InputDisabled() {
  return (
    <div className="grid max-w-sm gap-2">
      <Label htmlFor="example-disabled">Account ID</Label>
      <Input id="example-disabled" disabled defaultValue="12345" />
    </div>
  );
}

Props and variants

Prop	Values	Default	Notes
`aria-invalid`	true, false	false	Invalid input receives a border and ring. Height uses --density-control-h.

For unchanged APIs, see Radix and shadcn.

States

Default
Placeholder
Focus visible
Disabled
Invalid

Keyboard

Key	Action
Tab	Move focus into or out of the input.
Text editing keys	Edit and select the value.

Accessibility notes

Always provide a persistent label.
Connect help and error text with aria-describedby and set aria-invalid for errors.

Do and don’t

Do

Email address

A persistent label remains visible after typing.

import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

export function InputDoLabel() {
  return (
    <div className="grid gap-2">
      <Label htmlFor="do-email">Email address</Label>
      <Input id="do-email" />
    </div>
  );
}

Don’t

Placeholder text disappears and is not a persistent visible label.

import { Input } from "@/components/ui/input";

export function InputDontPlaceholderOnly() {
  return <Input aria-label="Email address" placeholder="Email address" />;
}

Source release

Revision 15b921e27444eb596901fc1a7d45cb5760cf0abd

Path components/ui/input.tsx

Status pristine