Automattic Design System

Components

Fieldset

A low-level component that associates an accessible legend and description with a group of multiple form control elements.

To label a single form control element, use the Field component instead.

import { Fieldset } from '@wordpress/ui';

View on Storybook

View source on GitHub

PropsPermalink to this section

NameDefaultDescription
className

string

CSS class name to apply to the element.

style

CSSProperties

CSS style to apply to the element.

render

ComponentRenderFn<HTMLAttributesWithRef<any>> | ReactElement<Record<string, unknown>, string | JSXElementConstructor<any>> | undefined

Replaces the component’s default HTML element using a given React element, or a function that returns a React element.

children

ReactNode

ExamplesPermalink to this section

DefaultPermalink to this section

const Default = () => <Fieldset.Root>{[
        <Fieldset.Legend key="legend">Legend</Fieldset.Legend>,
        <Fieldset.Description key="description">
            This is a description for the entire fieldset.
        </Fieldset.Description>,
        [ 'Apples', 'Bananas' ].map( ( fruit ) => (
            // eslint-disable-next-line jsx-a11y/label-has-associated-control
            (<label key={ fruit }>
                <input type="checkbox" /> { fruit }
            </label>)
        ) ),
    ]}</Fieldset.Root>;

Hidden LegendPermalink to this section

When hideFromVision is set on Fieldset.Legend, the legend is visually hidden but remains accessible to screen readers.

const HiddenLegend = () => <Fieldset.Root>{[
        <Fieldset.Legend hideFromVision key="legend">
            Legend
        </Fieldset.Legend>,
        [ 'Apples', 'Bananas' ].map( ( fruit ) => (
            // eslint-disable-next-line jsx-a11y/label-has-associated-control
            (<label key={ fruit }>
                <input type="checkbox" /> { fruit }
            </label>)
        ) ),
    ]}</Fieldset.Root>;

With DetailsPermalink to this section

To add rich content (such as links) to the description, use Fieldset.Details.

Although this content is not associated with the fieldset using direct semantics, it is made discoverable to screen reader users via a visually hidden description, alerting them to the presence of additional information below.

If the content only includes plain text, use Fieldset.Description instead, so the readout is not unnecessarily verbose for screen reader users.

const WithDetails = () => <Fieldset.Root>{[
        <Fieldset.Legend key="legend">Legend</Fieldset.Legend>,
        <Fieldset.Details key="details">
            { DETAILS_EXAMPLE }
        </Fieldset.Details>,
        [ 'Apples', 'Bananas' ].map( ( fruit ) => (
            // eslint-disable-next-line jsx-a11y/label-has-associated-control
            (<label key={ fruit }>
                <input type="checkbox" /> { fruit }
            </label>)
        ) ),
    ]}</Fieldset.Root>;