# Fieldset

> Native `<fieldset>` for a group of related controls (a radio set, an address).

Source: https://ui.jcsoftdev.com/docs/components/fieldset

Native `<fieldset>` for a group of related controls (a radio set, an address). `disabled`
disables every control inside, as the platform does.

## Import

```ts
import { Fieldset } from "@jcsoftdev/ui/forms";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/forms/fieldset`.

## Usage

```tsx
export const Default: Story = {
  render: (args) => (
    <Fieldset {...args}>
      <Field label="Nombre">
        <Input />
      </Field>
      <Field label="DNI">
        <Input inputMode="numeric" />
      </Field>
    </Fieldset>
  ),
  play: async ({ canvasElement }) => {
    await expect(within(canvasElement).getByRole("group", { name: "Apoderado" })).toBeVisible();
  },
};
```

_Source of the Storybook story._

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `legend` * | `ReactNode` |  | The group name; announced with each control inside. |
| `description` | `ReactNode` |  |  |

`*` marks a required prop.

It also accepts the native props of the element or primitive it renders (for example `className`, `id`, `aria-*` and event handlers).

## Storybook stories

- [Default](/storybook/?path=/story/forms-fieldset--default)
- [Disabled](/storybook/?path=/story/forms-fieldset--disabled)

## Source

`packages/ui/src/forms/fieldset/fieldset.tsx`