Components
Input
A text input field with focus, invalid, and disabled states.
Input wraps the Base UI Input primitive with the Faber UI styling tokens. It supports all native input attributes including type, placeholder, disabled, and aria-invalid.
Installation
pnpm dlx shadcn@latest add https://faber-ui.vercel.app/r/input.jsonUsage
import { Input } from "@/components/ui/input";
export default function Example() {
return <Input type="email" placeholder="you@example.com" />;
}Examples
Default
States
With a label
Combine Input with Label and Field for accessible form rows:
import { Field } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
export default function Example() {
return (
<Field>
<Label htmlFor="name">Name</Label>
<Input id="name" placeholder="Ada Lovelace" />
</Field>
);
}API
The Input accepts all props of a native <input> element, plus a className prop merged with tailwind-merge.
Changelog
Full Input historyLast updated on