Skip Navigation
React Magma

Fieldset

The `Fieldset` component renders a semantic <fieldset> element with a <legend> to provide accessible grouping for related controls such as *checkboxes* and *radios*. This follows the WCAG technique H71 and aligns with the WAI-ARIA APG checkbox pattern for grouping form controls.

Basic Usage

import React from 'react';


import { Fieldset, Checkbox } from 'react-magma-dom';


export function Example() {
  return (
    <Fieldset legend="Select your options">
      <Checkbox labelText="Option A" />
      <Checkbox labelText="Option B" />
      <Checkbox labelText="Option C" />
    </Fieldset>
  );
}

Visually Hidden Legend

Use the visuallyHiddenLegend prop to visually hide the legend while keeping it accessible to screen readers.

import React from 'react';


import { Fieldset, Checkbox } from 'react-magma-dom';


export function Example() {
  return (
    <Fieldset legend="Hidden legend" visuallyHiddenLegend>
      <Checkbox labelText="Option A" />
      <Checkbox labelText="Option B" />
    </Fieldset>
  );
}

Div Variant

Set as="div" to render a div with role="group" and aria-labelledby instead of a native fieldset element. The legend text is rendered as a span.

import React from 'react';


import { Fieldset, Checkbox } from 'react-magma-dom';


export function Example() {
  return (
    <Fieldset as="div" legend="Div group label">
      <Checkbox labelText="Option A" />
      <Checkbox labelText="Option B" />
    </Fieldset>
  );
}

With Radios

import React from 'react';


import { Fieldset, Radio, RadioGroup } from 'react-magma-dom';


export function Example() {
  return (
    <Fieldset legend="Choose one" legendId="radio-legend">
      <RadioGroup labelledById="radio-legend" name="radio-example">
        <Radio labelText="Radio A" value="a" />
        <Radio labelText="Radio B" value="b" />
        <Radio labelText="Radio C" value="c" />
      </RadioGroup>
    </Fieldset>
  );
}

Inverse

import React from 'react';


import { Fieldset, Checkbox, Card, CardBody } from 'react-magma-dom';


export function Example() {
  return (
    <Card isInverse>
      <CardBody>
        <Fieldset legend="Inverse fieldset" isInverse>
          <Checkbox labelText="Option A" />
          <Checkbox labelText="Option B" />
        </Fieldset>
      </CardBody>
    </Card>
  );
}

Fieldset Props

as

Description

Element to render for the fieldset container.

Type

|

Default

fieldset

children

Required

Description

The content of the component

Type

React.ReactNode

Default

-

isInverse

Description

If true, the component will have inverse styling to better appear on a dark background

Type

boolean

Default

false

legend

Required

Description

Visible accessible label for the group.

Type

React.ReactNode

Default

-

legendId

Description

ID for the legend element. If omitted, a stable ID is generated.

Type

string

Default

-

visuallyHiddenLegend

Description

When true, visually hides the legend but keeps it accessible to screen readers.

Type

boolean

Default

false

On this page

Deploys by Netlify