Fieldset

An unstyled, accessible fieldset component with semantic legend and optional collapsible content.

Build fully custom fieldset containers with complete control over layout and styling.

basic-demo

Pre-styled Versions

Choose a pre-styled library to use Fieldset with ready-made designs.

Styled

Theme-based styling with CSS variables

Tailwind

Utility-first styling with Tailwind CSS

For hook-based usage without components, see the Headless API.

Features#

Compound component API with six sub-components: Root, Legend, Title, Trigger, Indicator, Content
Semantic fieldset/legend HTML structure for native form grouping

Usage#

import { Fieldset } from 'primereact/fieldset';

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

Behavior#

Motion Animation#

Use motionProps on Root to configure open/close animations.

<Fieldset.Root motionProps={{ name: 'p-collapsible', cssVarPrefix: 'fieldset-content', hideStrategy: 'none' }}>...</Fieldset.Root>

See Motion for animation phases, CSS variables, and hide strategies.

Polymorphic Rendering#

Use as on any sub-component to change the rendered HTML element.

<Fieldset.Root as="div">
    <Fieldset.Legend as="div">
        <Fieldset.Title as="h3">...</Fieldset.Title>
    </Fieldset.Legend>
    <Fieldset.Content as="section">...</Fieldset.Content>
</Fieldset.Root>

Default elements: Root=fieldset, Legend=legend, Title=span, Trigger=button, Content=div, Indicator=span.

Render Function Children#

Content accepts a render function as children, providing access to the component instance. The instance exposes fieldset (root instance) and motion (animation state).

<Fieldset.Content>{(instance) => <div>Fieldset is {instance.fieldset?.state.open ? 'open' : 'closed'}</div>}</Fieldset.Content>

Pass Through#

Some parts may not be visible in the preview depending on the component's current state.

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.

/* Select a part to see its CSS selector for custom styling */

API#

FieldsetRoot#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: FieldsetRootInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: FieldsetRootInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`FieldsetRootInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<FieldsetRootPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: FieldsetRootInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`open`	`boolean`	`false`
Controls the open state of the collapsible.
`defaultOpen`	`boolean`	`false`
Defines the initial open state of the collapsible.
`disabled`	`boolean`	`false`
When disabled, the component cannot be interacted with.
`tabIndex`	`number`	`0`
Index of the element in tabbing order.
`onOpen`	`(event?: SyntheticEvent) => void`	—
Callback triggered when the content is opened.
`onClose`	`(event?: SyntheticEvent) => void`	—
Callback triggered when the content is closed.
`onOpenChange`	`(event: useFieldsetOpenChangeEvent) => void`	—
Callback triggered when the content's toggle state changes.
`lazy`	`boolean`	`false`
When enabled, hidden content is not rendered at all. Defaults to false that hides content with css.
`motionProps`	`MotionOptions`	—
Used to configure the motion of the fieldset content.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"fieldset"`
`data-part`	`"root"`
`data-open`	Present when expanded
`data-closed`	Present when collapsed
`data-disabled`	Present when disabled

Defines passthrough(pt) options of Fieldset component.

label	type	description
root	FieldsetRootPassThroughType<HTMLAttributes<HTMLFieldSetElement>>	Used to pass attributes to the root's DOM element.
legend	FieldsetRootPassThroughType<HTMLAttributes<HTMLLegendElement>>	Used to pass attributes to the legend's DOM element.
title	FieldsetRootPassThroughType<HTMLAttributes<HTMLSpanElement>>	Used to pass attributes to the title's DOM element.
trigger	FieldsetRootPassThroughType<HTMLAttributes<HTMLButtonElement>>	Used to pass attributes to the trigger's DOM element.
content	FieldsetRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the content's DOM element.
contentOuter	FieldsetRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the content outer wrapper's DOM element.
contentInner	FieldsetRootPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the content inner wrapper's DOM element.
indicator	FieldsetRootPassThroughType<HTMLAttributes<HTMLSpanElement>>	Used to pass attributes to the indicator's DOM element.

FieldsetLegend#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: FieldsetLegendInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: FieldsetLegendInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`FieldsetLegendInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<FieldsetLegendPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: FieldsetLegendInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Defines passthrough(pt) options of FieldsetLegend component.

label	type	description
root	FieldsetLegendPassThroughType<HTMLAttributes<HTMLLegendElement>>	Used to pass attributes to the root's DOM element.

FieldsetTitle#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: FieldsetTitleInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: FieldsetTitleInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`FieldsetTitleInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<FieldsetTitlePassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: FieldsetTitleInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Defines passthrough(pt) options of FieldsetTitle component.

label	type	description
root	FieldsetTitlePassThroughType<HTMLAttributes<HTMLSpanElement>>	Used to pass attributes to the root's DOM element.

FieldsetTrigger#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: FieldsetTriggerInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: FieldsetTriggerInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`FieldsetTriggerInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<FieldsetTriggerPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: FieldsetTriggerInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"fieldset"`
`data-part`	`"trigger"`
`data-content-open`	Present when content open
`data-content-closed`	Present when content closed

Defines passthrough(pt) options of FieldsetTrigger component.

label	type	description
root	FieldsetTriggerPassThroughType<HTMLAttributes<HTMLButtonElement>>	Used to pass attributes to the root's DOM element.

FieldsetIndicator#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: FieldsetIndicatorInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: FieldsetIndicatorInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`FieldsetIndicatorInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<FieldsetIndicatorPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: FieldsetIndicatorInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`match`	`"open"` \| `"closed"`	—
Determines the visibility of the indicator based on the state of the fieldset. Valid values are: - "open": Indicator is visible when the fieldset is expanded. - "closed": Indicator is visible when the fieldset is collapsed.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"fieldset"`
`data-part`	`"indicator"`
`data-open`	Present when expanded
`data-closed`	Present when collapsed

Defines passthrough(pt) options of FieldsetIndicator component.

label	type	description
root	FieldsetIndicatorPassThroughType<HTMLAttributes<HTMLSpanElement>>	Used to pass attributes to the root's DOM element.

FieldsetContent#

Name	Type	Default
`ref`	`Ref<unknown>`	—
The reference to the component instance.
`pIf`	`boolean`	`true`
Whether the component should be rendered.
`style`	`CSSProperties` \| `((instance?: FieldsetContentInstance) => CSSProperties)`	—
The style to apply to the component.
`className`	`string` \| `((instance?: FieldsetContentInstance) => string)`	—
The class name to apply to the component.
`as`	`string` \| `number` \| `bigint` \| `boolean` \| `ComponentClass<any, any>` \| `FunctionComponent<any>` \| `ReactElement<unknown, string` \| `JSXElementConstructor<any>>` \| `Iterable<ReactNode, any, any>` \| `ReactPortal` \| `Promise<AwaitedReactNode>`	—
The component type to render.
`asChild`	`boolean`	`false`
Whether the component should be rendered as a child component.
`instance`	`FieldsetContentInstance`	—
The instance to pass to the component.
`pt`	`SafeRecord<FieldsetContentPassThrough>`	—
The pass-through props to pass to the component.
`ptOptions`	`PassThroughOptions`	—
The pass-through options to pass to the component.
`unstyled`	`boolean`	—
Whether the component should be rendered without classes.
`dt`	`unknown`	—
The design token to use for the component.
`styles`	`StylesOptions<ComponentInstance>`	—
The styles to use for the component.
`render`	`(instance: FieldsetContentInstance) => ReactNode`	—
The render function to render the component with instance access.
`children`	`any`	—
The children to render. Accepts `React.ReactNode` for static content or a render function `(instance: I) => React.ReactNode` for instance access. Typed as `any` to avoid JSX type errors when used directly in templates.
`[key: string]`	`any`	—
`pt-{optionName}-*`	`-`	—
Pass through attributes for customizing component. For more info, see Pass Through tab.

Attribute	Value
`data-scope`	`"fieldset"`
`data-part`	`"content"`
`data-open`	Present when expanded
`data-closed`	Present when collapsed

Defines passthrough(pt) options of FieldsetContent component.

label	type	description
root	FieldsetContentPassThroughType<HTMLAttributes<HTMLDivElement>>	Used to pass attributes to the root's DOM element.

Accessibility#

Fieldset uses the semantic fieldset element with a legend for the title. This native structure provides accessible grouping without additional ARIA roles. For toggleable usage, the trigger button uses aria-controls to reference the content region and aria-expanded to reflect visibility state.

Keyboard Support#

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