ShadcnStore

Appearance

Shadcn Input ​

The shadcn/ui Input is a copy-paste text field styled with Tailwind CSS v4. It renders a native <input>, so it accepts every input type and attribute, and it pairs with a Label and the Form component for accessible, validated forms. Inputs power the login, signup, checkout, and search flows across ShadcnStore blocks.

Key features ​

  • Native <input>, so every type and attribute works out of the box.
  • Pairs with Label and the Form component for accessible, validated fields.
  • Supports disabled, read-only, and error (aria-invalid) states.
  • Tailwind-styled and dark-mode ready.
  • No primitive dependency — a styled native element.

Installation ​

bash
npx shadcn@latest add input

For labelled fields, also add the label:

bash
npx shadcn@latest add label

Usage ​

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

export function Example() {
  return <Input type="email" placeholder="[email protected]" />
}

With a label ​

Connect the label to the input with matching htmlFor and id so clicking the label focuses the field.

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

<div className="grid gap-2">
  <Label htmlFor="password">Password</Label>
  <Input id="password" type="password" />
</div>

Input types ​

The type prop maps to the native input types: text, email, password, number, search, tel, url, date, and file. A file input styles the native picker, and pairing a search input with a Button makes a compact search field.

tsx
<Input type="file" />

<div className="flex gap-2">
  <Input type="search" placeholder="Search…" />
  <Button type="submit">Search</Button>
</div>

Disabled state ​

tsx
<Input disabled placeholder="Disabled" />

Props ​

The Input forwards all native <input> attributes, including type, placeholder, value, defaultValue, onChange, disabled, readOnly, required, aria-invalid, and aria-describedby. There is no custom variant prop; adjust size and style with Tailwind classes.

Accessibility ​

  • Always give an input an accessible name: a connected Label, an aria-label, or an aria-labelledby.
  • For errors, set aria-invalid and point aria-describedby at the message so assistive tech announces it.
  • Keep placeholder text as a hint, not a label. Placeholders disappear on input and are not a reliable accessible name.

When to use the Input ​

Use the Input for single-line free text and short values: email, name, password, search, quantity, and URLs. For multi-line text use a Textarea, for a fixed set of choices use a Select, and for structured forms with validation wrap inputs in the Form component. Combine an input with a Button for search and submit patterns.

Used in these blocks ​

Inputs pair with a Label for naming, the Form component for validation, a Button for submission, and a Select or Dialog inside larger flows.

FAQ ​

What is the shadcn input used for? ​

The Input is a styled text field for forms: login, signup, search, checkout, and settings. It renders a native <input> element and accepts all its attributes.

How do I add a label to a shadcn input? ​

Pair Input with the Label component and connect them with matching htmlFor and id so clicking the label focuses the field.

How do I show a validation error on an input? ​

Add aria-invalid and describe the error with aria-describedby, or use the Form component which wires validation messages automatically.

Can I add an icon inside the input? ​

Wrap the input in a relative container and position the icon absolutely, adding left or right padding to the input so text does not overlap it.

Copyright © 2025-2026 ShadcnStore