# Fieldset

Fieldset wraps Base UI's fieldset primitive with the Tailwind classes from the official Base UI example.

::example{src="components/fieldset/fieldset.tsx"}

## Anatomy

### Base UI Style

```tsx
import Field from "@/components/ui/field"
import Fieldset from "@/components/ui/fieldset"

<Fieldset.Root>
  <Fieldset.Legend>Billing details</Fieldset.Legend>
  <Field.Root>
    <Field.Label>Company</Field.Label>
    <Field.Control />
  </Field.Root>
</Fieldset.Root>
```

### Shadcn Style

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

## Composition

Use the following composition to build `Fieldset`:

```txt
Fieldset
└── FieldsetLegend
```


## API Reference

Official API: [Base UI Fieldset API](https://base-ui.com/react/components/fieldset#api-reference).

This wrapper preserves the underlying Base UI Fieldset API. Styled parts forward `className`, `style`, and `render` where Base UI supports them.

### Root

`Fieldset` exposes the corresponding Base UI part with the wrapper's Tailwind styles.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `defaultValue` / `defaultOpen` | `any` | - | Initial uncontrolled value or open state when supported. |
| `value` / `open` | `any` | - | Controlled value or open state when supported. |
| `onValueChange` / `onOpenChange` | `function` | - | Called when controlled state changes. |
| `children` | `React.ReactNode` | - | Child parts rendered inside the root. |

### Legend

`Fieldset.Legend` exposes the corresponding Base UI part with the wrapper's Tailwind styles.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| (state) => string` | - | Classes for the part state. |
| `style` | `React.CSSProperties \| (state) => React.CSSProperties` | - | Inline style or state-based style. |
| `render` | `ReactElement \| (props, state) => ReactElement` | - | Replaces the rendered element when supported. |
| `children` | `React.ReactNode` | - | Child content when the part accepts children. |