Fieldset
A container for grouping related form fields with a legend.
'use client';
import { Field, FieldLabel } from '@/components/ui/field';
import { Fieldset, FieldsetLegend } from '@/components/ui/fieldset';
import { Input } from '@/components/ui/input';
export function FieldsetDefault() {
return (
<Fieldset className='flex flex-col gap-4'>
<FieldsetLegend>Shipping Address</FieldsetLegend>
<Field>
<FieldLabel>Street Address</FieldLabel>
<Input placeholder='123 Main St' />
</Field>
<Field>
<FieldLabel>City</FieldLabel>
<Input placeholder='New York' />
</Field>
</Fieldset>
);
}
Installation
Usage
import { Fieldset, FieldsetLegend } from "@/components/ui/fieldset"<Fieldset>
<FieldsetLegend>Personal Information</FieldsetLegend>
<Field>
<FieldLabel>Name</FieldLabel>
<Input placeholder='John Doe' />
</Field>
</Fieldset>