Fieldset

Fieldset is a grouping component with a legend and content toggle feature.

Legend

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

basic-demo

Usage#

import { Fieldset } from '@primereact/ui/fieldset';

<Fieldset.Root>
    <Fieldset.Legend>
        <Fieldset.Trigger>Toggle</Fieldset.Trigger>
        <Fieldset.Title>Title</Fieldset.Title>
    </Fieldset.Legend>
    <Fieldset.Content>Content</Fieldset.Content>
</Fieldset.Root>

Examples#

Toggleable#

Fieldset can be made toggleable by using the Fieldset.Trigger component inside the legend. The defaultOpen prop sets the initial open state. Content visibility is animated automatically with the built-in collapsible behavior.

toggleable-demo

'use client';
import { Minus } from '@primeicons/react/minus';
import { Plus } from '@primeicons/react/plus';
import type { FieldsetTriggerInstance } from '@primereact/types/shared/fieldset';
import { Fieldset } from '@primereact/ui/fieldset';

export default function ToggleableDemo() {
    return (
        <Fieldset.Root defaultOpen>
            <Fieldset.Legend>
                <Fieldset.Trigger className="flex items-center gap-2">
                    {({ fieldset }: FieldsetTriggerInstance) => {
                        const open = fieldset?.state.open;

                        return (
                            <>
                                {open ? <Minus /> : <Plus />}
                                <Fieldset.Title>Legend</Fieldset.Title>
                            </>
                        );
                    }}
                </Fieldset.Trigger>
            </Fieldset.Legend>
            <Fieldset.Content>
                <p className="text-sm">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                    enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
                    reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
                    in culpa qui officia deserunt mollit anim id est laborum.
                </p>
            </Fieldset.Content>
        </Fieldset.Root>
    );
}

Controlled#

Fieldset can be controlled externally using the open and onOpenChange props. This allows full control over the fieldset's open state from the parent component.

controlled-toggleable-demo

'use client';
import type { useFieldsetOpenChangeEvent } from '@primereact/types/shared/fieldset';
import { Button } from '@primereact/ui/button';
import { Fieldset } from '@primereact/ui/fieldset';
import { useState } from 'react';
import { Minus } from '@primeicons/react/minus';
import { Plus } from '@primeicons/react/plus';

export default function ControlledToggleableDemo() {
    const [open, setOpen] = useState(true);

    return (
        <div className="space-y-4">
            <div className="flex gap-2 justify-center">
                <Button onClick={() => setOpen(true)} severity={open ? 'primary' : 'secondary'}>
                    Open
                </Button>
                <Button onClick={() => setOpen(false)} severity={!open ? 'primary' : 'secondary'}>
                    Close
                </Button>
            </div>
            <Fieldset.Root open={open} onOpenChange={(e: useFieldsetOpenChangeEvent) => setOpen(e.value ?? false)}>
                <Fieldset.Legend>
                    <Fieldset.Trigger className="flex items-center gap-2">
                        {open ? <Minus /> : <Plus />}
                        Legend
                    </Fieldset.Trigger>
                </Fieldset.Legend>
                <Fieldset.Content>
                    <p className="text-sm">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                        enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                        in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    </p>
                </Fieldset.Content>
            </Fieldset.Root>
        </div>
    );
}

Accessibility#

Fieldset component uses the semantic fieldset element. Toggleable fieldsets use a trigger button that has aria-controls to define the id of the content section along with aria-expanded for the visibility state.

Keyboard Support#

Key	Function
`tab`	Moves focus to the next the focusable element in the page tab sequence.
`shift + tab`	Moves focus to the previous the focusable element in the page tab sequence.
`enter`	Toggles the visibility of the content.
`space`	Toggles the visibility of the content.