---
title: Fieldset
description: A container for grouping related form fields with a legend.
links:
  doc: https://base-ui.com/react/components/fieldset
  api: https://base-ui.com/react/components/fieldset#api-reference
---

```tsx
'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

```bash
npx shadcn@latest add @fab-ui/fieldset
```

**Install the following dependencies:**

```bash
npm install @base-ui/react
```

**Copy and paste the following code into your project.**

```tsx
'use client';

import { Fieldset as FieldsetPrimitive } from '@base-ui/react/fieldset';

import { cn } from '@/lib/utils';

function Fieldset({ className, ...props }: FieldsetPrimitive.Root.Props) {
  return (
    <FieldsetPrimitive.Root
      data-slot='fieldset-legend'
      className={cn('font-medium', className)}
      {...props}
    />
  );
}

function FieldsetLegend({
  className,
  ...props
}: FieldsetPrimitive.Legend.Props) {
  return (
    <FieldsetPrimitive.Legend
      data-slot='fieldset-legend'
      className={cn('font-medium', className)}
      {...props}
    />
  );
}

export { Fieldset, FieldsetLegend };
```

**Update the import paths to match your project setup.**

## Usage

```tsx
import { Fieldset, FieldsetLegend } from "@/components/ui/fieldset"
```

```tsx
<Fieldset>
  <FieldsetLegend>Personal Information</FieldsetLegend>
  <Field>
    <FieldLabel>Name</FieldLabel>
    <Input placeholder='John Doe' />
  </Field>
</Fieldset>
```