# Fieldset

Groups related fields under one accessible legend for the 90% case.

## Installation

```tsx
import { Fieldset } from "@makeplane/propel/components/fieldset";
```
## Usage

```tsx
import { Fieldset } from "@makeplane/propel/components/fieldset";
import { InputField } from "@makeplane/propel/components/input-field";

export default function BasicDemo() {
  return (
    <Fieldset legend="Workspace details" legendSize="lg" bordered={false}>
      <InputField
        size="lg"
        orientation="vertical"
        name="name"
        label="Name"
        placeholder="Acme Inc."
      />
      <InputField
        size="lg"
        orientation="vertical"
        name="slug"
        label="URL slug"
        placeholder="acme"
      />
    </Fieldset>
  );
}
```
## Examples

### Bordered

A bordered fieldset draws a visible boundary around the group, useful when it sits among other content. Pair it with a `description` for supporting text below the legend.

```tsx
import { Fieldset } from "@makeplane/propel/components/fieldset";
import { InputField } from "@makeplane/propel/components/input-field";

export default function BorderedDemo() {
  return (
    <Fieldset
      legend="Billing details"
      legendSize="lg"
      bordered={true}
      description="Enter your billing information below."
    >
      <InputField
        size="lg"
        orientation="vertical"
        name="company"
        label="Company"
        placeholder="Acme Inc."
      />
      <InputField
        size="lg"
        orientation="vertical"
        name="taxId"
        label="Tax ID"
        placeholder="US-123"
      />
    </Fieldset>
  );
}
```

### Legend sizes

`legendSize` controls the size of the legend text: `lg`, `xl`, or `2xl`.

```tsx
import { Fieldset } from "@makeplane/propel/components/fieldset";
import { InputField } from "@makeplane/propel/components/input-field";

export default function LegendSizesDemo() {
  return (
    <div className="flex flex-col items-start gap-6">
      {(["lg", "xl", "2xl"] as const).map((legendSize) => (
        <Fieldset
          key={legendSize}
          legend="Workspace details"
          legendSize={legendSize}
          bordered={false}
        >
          <InputField
            size="lg"
            orientation="vertical"
            name={`name-${legendSize}`}
            label="Name"
            placeholder="Acme Inc."
          />
        </Fieldset>
      ))}
    </div>
  );
}
```
## API Reference

### Fieldset

The ready-made fieldset: groups a `legend` with its related controls for the 90% case. Grafts
Base UI's `Fieldset` behavior onto propel's styled parts — pass the legend text, `legendSize`,
and whether the group is `bordered`; everything else flows through to the underlying fieldset
root.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `bordered` (required) | `NonNullable<boolean \| null \| undefined>` | — | Whether a visible border wraps the group. |
| `legend` (required) | `ReactNode` | — | The legend text labelling the group. |
| `legendSize` (required) | `"md" \| "lg" \| "xl" \| "2xl"` | — | Text size for the legend block — the legend and, when present, its description. |
| `children` | `ReactNode` | — | The grouped controls. |
| `render` | `ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, {}>` | — | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
| `description` | `ReactNode` | — | Supporting text shown below the legend. |