Components
Loading preview...
A comprehensive field system with support for labels, descriptions, errors, and complex form layouts.
@reapollo
npx shadcn@latest add https://21st.dev/r/larsen66/interfaces-fieldimport { Field, FieldContent, FieldDescription, FieldLabel } from "@/components/ui/interfaces-field"
import { Input } from "@/components/ui/input"
export default function DemoSimpleField() {
return (
<div className="flex w-full min-h-screen items-center justify-center bg-background p-8 overflow-hidden">
<div className="w-full max-w-md">
<Field>
<FieldLabel htmlFor="username">Username</FieldLabel>
<FieldContent>
<Input id="username" placeholder="Enter username" />
<FieldDescription>This is your public display name.</FieldDescription>
</FieldContent>
</Field>
</div>
</div>
)
}