Accordions | Pear

PAccordion

PAccordion uses native details and summary markup, with a couple of Pear extras for button-style summaries and custom headings.

Standalone

What is Pico CSS?

Pico gives semantic HTML a clean default look. Pear keeps that HTML shape and makes the Vue bits a little easier.

Can the summary use a slot?

Yes. The simple case uses the summary prop, but richer headings can use the named summary slot.

Custom summary slot

The summary slot is useful when the heading needs markup.

vue

<p-accordion summary="What is Pico CSS?" v-model:open="isPicoOpen">
  <p>Pico styles semantic HTML with very few classes.</p>
</p-accordion>

<p-accordion>
  <template #summary>
    <strong>Custom summary slot</strong>
  </template>
  <p>This summary is rendered from slot content.</p>
</p-accordion>

PAccordionGroup

PAccordionGroup links child accordions together when only one panel should stay open.

Exclusive Group

These share a generated native details name, so opening one closes the others.

Profile

Update profile information, avatar, and display preferences.

Billing

Review invoices, payment methods, and subscription details.

Security

Manage password settings, sessions, and multi-factor authentication.

vue

<p-accordion-group exclusive>
  <p-accordion summary="Profile" open>...</p-accordion>
  <p-accordion summary="Billing">...</p-accordion>
  <p-accordion summary="Security">...</p-accordion>
</p-accordion-group>

Named Group

Give the group a name when you want the native details grouping to stay stable across renders.

General

General settings for the current workspace.

Notifications

Notification preferences and delivery settings.

Danger zone

Destructive actions and irreversible account controls live here.

vue

<p-accordion-group exclusive name="example-settings">
  <p-accordion summary="General">...</p-accordion>
  <p-accordion summary="Notifications">...</p-accordion>
  <p-accordion summary="Danger zone">...</p-accordion>
</p-accordion-group>

Button Style

Default button summary

This summary uses Pico's role="button" accordion pattern.

Secondary button summary

This summary uses the secondary button style.

Contrast outline summary

This summary uses the contrast and outline button styles.

vue

<p-accordion summary="Secondary button summary" button variant="secondary">
  <p>This summary uses the secondary button style.</p>
</p-accordion>

API

PAccordion Props

Name	Type	Default	Description
`summary`	`string`	-	Text shown in the details summary when no summary slot is provided.
`open`	`boolean`	false	Initial native details open state. Can be controlled with v-model:open.
`name`	`string`	-	Native details group name. Inherits from PAccordionGroup when present.
`button`	`boolean`	false	Applies Pico's button-style summary pattern.
`variant`	`'secondary' \| 'contrast'`	-	Button summary variant when button is true.
`outline`	`boolean`	false	Button summary outline style when button is true.

PAccordionGroup Props

Name	Type	Default	Description
`exclusive`	`boolean`	false	Provides a shared details name so only one child accordion opens at a time.
`name`	`string`	-	Stable native details group name. Generated when exclusive is true and no name is provided.

Slots

Name	Type	Default	Description
`default`	`slot`	-	Accordion panel content.
`summary`	`slot`	-	Custom summary content.
`PAccordionGroup default`	`slot`	-	Child accordions.

Events

Name	Type	Default	Description
`update:open`	`boolean`	-	Emitted when the native details element opens or closes.