Input

InstallationCopy Anchor Link

pnpm dlx shadcn@latest add @columbus/input

UsageCopy Anchor Link

Give every input a name: wrap it in a Field with a FieldLabel, point a Label at it with htmlFor, or pass aria-label.

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

<Input aria-label="Email" placeholder="you@example.com" type="email" />;

SizesCopy Anchor Link

With labelCopy Anchor Link

For labels, descriptions, and validation messages together, use Field.

FileCopy Anchor Link

API referenceCopy Anchor Link

Also accepts every Base UI Input prop and native <input> attribute. className styles the outer wrapper, so use it for width and margins.