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-field"use client"
import { useState } from "react"
import {
Field,
FieldContent,
FieldDescription,
FieldGroup,
FieldLabel,
FieldLegend,
FieldSeparator,
FieldSet,
} from "@/components/ui/interfaces-field"
import { Checkbox } from "@/components/ui/checkbox"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
export default function ComplexFormDemo() {
const [sameAsShipping, setSameAsShipping] = useState(true)
return (
<div className="flex w-full min-h-screen items-center justify-center bg-background p-6 overflow-hidden">
<div className="w-full max-w-3xl rounded-3xl border bg-background p-6 shadow-sm md:p-8">
<FieldGroup>
<FieldSet>
<div>
<FieldLegend>Payment Method</FieldLegend>
<FieldDescription>All transactions are secure and encrypted</FieldDescription>
</div>
<Field>
<FieldLabel htmlFor="card-name">Name on Card</FieldLabel>
<FieldContent>
<Input id="card-name" placeholder="Name on Card" defaultValue="David Larsen" />
</FieldContent>
</Field>
<Field>
<FieldLabel htmlFor="card-number">Card Number</FieldLabel>
<FieldContent>
<Input id="card-number" placeholder="Card Number" defaultValue="4242 4242 4242 4242" />
<FieldDescription>Enter your 16-digit card number</FieldDescription>
</FieldContent>
</Field>
<div className="grid gap-4 md:grid-cols-3">
<Field>
<FieldLabel htmlFor="card-month">Month</FieldLabel>
<FieldContent>
<Input id="card-month" placeholder="Month" defaultValue="12" />
</FieldContent>
</Field>
<Field>
<FieldLabel htmlFor="card-year">Year</FieldLabel>
<FieldContent>
<Input id="card-year" placeholder="Year" defaultValue="2028" />
</FieldContent>
</Field>
<Field>
<FieldLabel htmlFor="card-cvv">CVV</FieldLabel>
<FieldContent>
<Input id="card-cvv" placeholder="CVV" defaultValue="123" />
</FieldContent>
</Field>
</div>
</FieldSet>
<FieldSeparator />
<FieldSet>
<div>
<FieldLegend>Billing Address</FieldLegend>
<FieldDescription>
The billing address associated with your payment method
</FieldDescription>
</div>
<Field orientation="horizontal">
<Checkbox
id="same-as-shipping"
checked={sameAsShipping}
onCheckedChange={(checked) => setSameAsShipping(checked === true)}
/>
<FieldLabel htmlFor="same-as-shipping">Same as shipping address</FieldLabel>
</Field>
<Field>
<FieldLabel htmlFor="comments">Comments</FieldLabel>
<FieldContent>
<Textarea
id="comments"
placeholder="Comments"
defaultValue="Leave delivery instructions for the concierge."
className="min-h-28 resize-none"
/>
</FieldContent>
</Field>
<div className="flex flex-col gap-3 sm:flex-row">
<button
type="button"
className="inline-flex h-10 items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow-sm transition-colors hover:bg-primary/90"
>
Submit
</button>
<button
type="button"
className="inline-flex h-10 items-center justify-center rounded-md border bg-background px-4 py-2 text-sm font-medium shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground"
>
Reset
</button>
</div>
</FieldSet>
</FieldGroup>
</div>
</div>
)
}