Fieldset is a grouping component with a content toggle feature.
import { Fieldset } from 'primeng/fieldset';
PrimeIcons is available at npm, run the following command to download it to your project.
<p-fieldset legend="Header">
<p class="m-0">
Lorem ipsum dolor sit amet...
</p>
</p-fieldset>
Content of the fieldset can be expanded and collapsed using toggleable option, default state is defined with collapsed option.
<p-fieldset legend="Header" [toggleable]="true">
<p>
Lorem ipsum dolor sit amet...
</p>
</p-fieldset>
Header section can also be defined with custom content instead of primitive values.
<p-fieldset>
<ng-template #header>
<div class="flex items-center gap-2 px-2">
<p-avatar
image="https://primefaces.org/cdn/primeng/images/demo/avatar/amyelsner.png"
shape="circle" />
<span class="font-bold">Amy Elsner</span>
</div>
</ng-template>
<p class="m-0">
Lorem ipsum dolor sit amet...
</p>
</p-fieldset>
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. |