Input

A styled text field, the shadcn/ui wrapper over a native <input>. Every standard input attribute passes straight through.

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

<Input type="email" placeholder="jane@example.com" />

A pass-through wrapper

There's no new API to learn: Input is a native input with the design-system classes applied, so type, placeholder, value/defaultValue, onChange, disabled, readOnly, and aria-invalid all behave exactly as they do on a plain <input>.

<Input placeholder="Search flowers…" />
<Input type="number" defaultValue={42} />
<Input placeholder="Read only" defaultValue="setosa" readOnly />
<Input placeholder="Disabled" disabled />
<Input placeholder="Invalid" aria-invalid />

Pairing it with a label

Wrap the field in a <label> so a click focuses the input, no extra component needed.

Species

<label className="flex flex-col gap-1.5">
  <span className="text-sm font-medium">Species</span>
  <Input placeholder="e.g. versicolor" />
</label>

Props

Input takes the full React.ComponentProps<"input"> set. The common ones:

Prop	Type	Notes
`type`	`string`	Any HTML input type: `text`, `email`, `number`, `password`, `search`…
`value` / `defaultValue`	`string` \| `number`	Controlled / uncontrolled contents.
`onChange`	`(e) => void`	Standard change handler.
`placeholder`	`string`	Muted hint shown when empty.
`disabled` / `readOnly`	`bool`	Block or freeze input; `disabled` also dims it.
`aria-invalid`	`bool`	Switches the border and ring to the destructive color.
`className`	`string`	Merged onto the field via `cn`.

Input is a client-only React primitive. It holds no data binding, so unlike Metric or Table it has no page.py form. Use it in .mdx and .tsx, wiring its value to state yourself.

Installation

Input is a shadcn/ui component. Add it with the CLI, then import it where you need it. A plain React component takes an import line at the top of your .mdx or .tsx:

bunx shadcn@latest add input

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