components / form
Input
Text field with visual states for focus, error, and disabled.
525 B gzip client componentbase ui · input
input-default.tsx
import { Input } from "@/components/ui/input";
export default function InputDefault() {
return (
<div className="flex w-full max-w-xs flex-col gap-3">
<Input aria-label="Name" placeholder="your name" />
<Input aria-label="File" type="file" />
<Input aria-label="Disabled" disabled placeholder="disabled" />
</div>
);
}Installation
$ npx shadcn@latest add https://cd-ui.vercel.app/r/input.jsonfirst time? set up components.json and the theme first: see installation.
Usage
import { Input } from "@/components/ui/input"
<Input placeholder="your name" />API
Input
Base UI · InputText field. Inside a Field, it gets its id, aria-describedby, and error state on its own.
| prop | type | default |
|---|---|---|
...propsEverything from the native | Input.Props | - |
classNameExtra classes, merged with | string | - |