Vue3 Fieldset is a grouping component with the optional content toggle feature. It supports Vue 3 with PrimeVue 3 and Vue 2 with PrimeVue 2.
Setup
Refer to PrimeVue setup documentation for download and installation steps for your environment such as Vue CLI, Vite or browser.
Import
import Fieldset from 'primevue/fieldset';
Getting Started
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>
Custom Header
Header of the panel is either defined with the legend property or the legend template.
<Fieldset>
<template #legend>
Header Content
</template>
Content
</Fieldset>
Toggleable
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>
Theming
Fieldset supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.
Resources
Visit the PrimeVue Fieldset showcase for demos and documentation.