# Field Advanced 4 - Fieldset with legend

> FieldSet grouping related fields under a shared FieldLegend label.

A shadcn/ui block from the [@shadcnblocks](https://shadcnblocks.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcnblocks/field-field-advanced-4).

- Page, with a live preview: https://shadcn.exchange/r/shadcnblocks/field-field-advanced-4
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcnblocks/field-field-advanced-4-light-3d38995cc975ca2a.png
- Registry item: https://shadcnblocks.com/r/field-field-advanced-4.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcnblocks.com/r/field-field-advanced-4.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `field`, `input`

## Files

### `example/field/field-advanced-4.tsx`

```tsx
import {
  Field,
  FieldDescription,
  FieldGroup,
  FieldLabel,
  FieldLegend,
  FieldSet,
} from "@/components/ui/field";
import { Input } from "@/components/ui/input";

export const title = "Fieldset with Legend";

const Example = () => (
  <div className="w-full max-w-md">
    <FieldSet>
      <FieldLegend>Address Information</FieldLegend>
      <FieldDescription>
        We need your address to deliver your order.
      </FieldDescription>
      <FieldGroup>
        <Field>
          <FieldLabel htmlFor="street">Street Address</FieldLabel>
          <Input
            className="bg-background"
            id="street"
            placeholder="123 Main St"
            type="text"
          />
        </Field>
        <div className="grid grid-cols-2 gap-4">
          <Field>
            <FieldLabel htmlFor="city">City</FieldLabel>
            <Input
              className="bg-background"
              id="city"
              placeholder="New York"
              type="text"
            />
          </Field>
          <Field>
            <FieldLabel htmlFor="zip">Postal Code</FieldLabel>
            <Input
              className="bg-background"
              id="zip"
              placeholder="90502"
              type="text"
            />
          </Field>
        </div>
      </FieldGroup>
    </FieldSet>
  </div>
);

export default Example;
```