import Fieldset from 'primevue/fieldset';
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
<script src="https://unpkg.com/primevue@^3/fieldset/fieldset.min.js"></script>
Fieldset is a container component that accepts content as its children.
<Fieldset legend="Godfather I">
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
</Fieldset>
Header of the panel is either defined with the legend property or the legend template.
<Fieldset>
<template #legend>
Header Content
</template>
Content
</Fieldset>
Content of the fieldset can be expanded and collapsed using toggleable option..
<Fieldset legend="Godfather I" :toggleable="true">
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
</Fieldset>
To control the initial state of the toggleable panel, use the collapsed property.
<Fieldset legend="Header Text" :toggleable="true" :collapsed="true">
Content
</Fieldset>
Use the v-model directive to enable two-way binding.
<button type="button" @click="isCollapsed = !isCollapsed">Toggle Programmatically</button>
<Fieldset legend="Header Text" :toggleable="true" v-model:collapsed="isCollapsed">
Content
</Fieldset>
Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.
| Name | Type | Default | Description |
|---|---|---|---|
| legend | string | null | Header text of the fieldset. |
| toggleable | boolean | null | When specified, content can toggled by clicking the legend. |
| collapsed | boolean | null | Defines the default visibility state of the content. |
| toggleButtonProps | object | null | Uses to pass the custom value to read for the anchor inside the component. |
| Name | Parameters | Description |
|---|---|---|
| toggle |
event.originalEvent: browser event event.value: collapsed state as a boolean |
Callback to invoke when a tab gets expanded or collapsed. |
| Name | Parameters |
|---|---|
| legend | - |
Following is the list of structural style classes, for theming classes visit
| Name | Element |
|---|---|
| p-fieldset | Fieldset element. |
| p-fieldset-toggleable | Toggleable fieldset element. |
| p-fieldset-legend | Legend element. |
| p-fieldset-content | Content element. |
Fieldset component uses the semantic fieldset element. When toggleable option is enabled, a clickable element with button role is included inside the legend element, this button has aria-controls to define the id of the content section along with aria-expanded for the visibility state. The value to read the button defaults to the value of the legend property and can be customized by defining an aria-label or aria-labelledby via the toggleButtonProps property.
The content uses region, defines an id that matches the aria-controls of the content toggle button and aria-labelledby referring to the id of the header.
| 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. |
None.