# Fieldset (/docs/components/fieldset)



<ComponentPreview name="fieldset-demo" />

## Overview [#overview]

Use Fieldset to group related form controls under one legend.

Fieldset is useful for radio groups, checkbox groups, address sections, permission groups, and any form area where several inputs answer one larger question.

## Anatomy [#anatomy]

A fieldset has a container, legend, optional description, and controls. The legend names the group. The controls inside should all relate to that group.

## Usage guidance [#usage-guidance]

Use Field for one control. Use Fieldset for a set of related controls. Combine both when each control in the group also needs its own label, description, or error.

## Accessibility [#accessibility]

The legend gives assistive technology context for the controls inside. Keep it visible and specific.

## Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTab value="cli">
      CLI
    </TabsTab>

    <TabsTab value="manual">
      Manual
    </TabsTab>
  </TabsList>

  <TabsPanel value="cli">
    ```bash
    npx love-ui@latest add fieldset
    ```
  </TabsPanel>

  <TabsPanel value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

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

      <Step>
        Copy and paste the following code into your project.
      </Step>

      <ComponentSource name="fieldset" title="components/ui/fieldset.tsx" />

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsPanel>
</CodeTabs>

## Usage [#usage]

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

```tsx
<Fieldset>
  <FieldsetLegend>Fieldset legend</FieldsetLegend>
</Fieldset>
```