Fieldset is a grouping component with a content toggle feature.
import { FieldsetModule } 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 pTemplate="header">
<div class="flex align-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>
Following is the list of structural style classes, for theming classes visit theming page.
| 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. |
API defines helper props, events and others for the PrimeNG Fieldset module.
Fieldset is a grouping component with the optional content toggle feature.
Defines the input properties of the component.
Defines emit that determine the behavior of the component based on a given condition or report the actions that the component takes.
| name | parameters | description | |
|---|---|---|---|
| collapsedChange | value : boolean | Emits when the collapsed state changes. | |
| onBeforeToggle | event : FieldsetBeforeToggleEvent | Callback to invoke before panel toggle. | |
| onAfterToggle | event : FieldsetAfterToggleEvent | Callback to invoke after panel toggle. |
Defines the templates used by the component.
Defines the custom events used by the component's emitters.
Custom panel toggle event, emits after toggle.
Custom panel toggle event, emits before toggle.