Fieldset

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

Import

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

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

Usage

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
• Disabled

Source

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