Collapsible section

Hides and reveals one part of a long settings page.

Refined portWildCollapsibleSection.vueLayout/CollapsibleSectionWCollapsibleSection

Try it

Open and close the sections, then switch to Disclosure for the lighter inline toggle.

Threshold

Variant

Badge

Header right

Starts open

<WildCollapsibleSection
  v-model="triggerOpen"
  label="Trigger"
>
  …
</WildCollapsibleSection>
<WildCollapsibleSection
  v-model="notifyOpen"
  label="Notify"
  icon="bell"
  badge="3"
>
  …
</WildCollapsibleSection>

Badge and header right belong to the section variant. Disclosure shows neither.

When to use

Use it to break a long settings form into named groups, such as an alarm’s Trigger and Notify.
Use the section variant for the main groups of a form.
Use the disclosure variant to tuck a few advanced options inside a group.

Don’t use it

For settings everyone needs. Leave them on the page.
To switch between views. Use Segmented.
For steps done in order. Use Progress tracker.

Variants

Section has a full-width header and a white panel. Disclosure is an inline text toggle with an indent.

Trigger when the value is above 100 m³/hr for 15 minutes.

section

disclosure

<WildCollapsibleSection v-model="open" label="Trigger" />
<WildCollapsibleSection v-model="open" label="Advanced options" variant="disclosure" />

Header

An icon sits before the label and a badge after it. Header-right holds a summary or a small action, beside the chevron.

<WildCollapsibleSection v-model="open" label="Recipients" icon="user-solid" badge="5" />
<WildCollapsibleSection v-model="open" label="Advanced options">
  <template #header-right>
    <WildButton variant="borders" size="2xs" @click.stop>Reset</WildButton>
  </template>
</WildCollapsibleSection>

Use the badge for a count of what’s inside, so the closed section still says something.

Content

Name the group with a short noun: Trigger, Notify, Recipients.
Use sentence case, and keep the label to one to three words.
Keep the badge to a number. Put a status in header-right.

Accessibility

The header is a button that announces whether it’s expanded. Where the browser supports it, find in page matches text in a closed section, such as a field label, and opens it.

Key	What it does
Tab	Moves to the header, then any header-right action, then into the open content.
Enter / Space	Opens or closes the section.

Props

Prop	Type	Default	Description
label	string	—	Header text.
modelValue	boolean	true	Open state, with v-model.
variant	'section' \| 'disclosure'	'section'	Full-width header with panel, or inline toggle.
icon	string	—	Icon name, shown before the label.
badge	string	—	Count shown after the label.
#header-right	slot	—	Summary or action beside the chevron. Section only.
#default	slot	—	The content that opens and closes.

Tokens

Token	Value	Where it lands
--global-neutral-grey-1200	#1D1C20	Disclosure label on hover.
--global-neutral-grey-1100	#2D2B32	Section label.
--global-neutral-grey-1000	#4F4D55	Chevron, badge, header-right and disclosure text.
--global-neutral-grey-900	#7F7D83	Header icon and disclosure triangle.
--global-neutral-grey-200	#F5F5F5	Header hover and badge fill.
--global-base-white	#FFFFFF	Content panel and focus ring gap.
--color-primary-active	#1877F2	Keyboard focus ring.
--radius-lg	8px	Content panel corners.
--radius-md	6px	Header hover ground corners.
--duration-moderate	200ms	Chevron turn.