Accordion groups several related disclosure rows and manages their shared open state. Use exclusive mode when the user should compare one section at a time, and non-exclusive mode when multiple sections can remain open.
Readiness
complete
Preview
live
Props
3
Examples
1
Code
implementation mapped
When to use
FAQ-like groups with repeated question and answer rows
Settings panels with several advanced subsections
Compact pages where only one detail area should be expanded at a time
When not to use
A single expandable region; use Disclosure
Primary navigation between pages or routes
Large bodies of content where hidden sections would make scanning harder
Accessibility
Role: group
Enter — Toggles the focused accordion item
Space — Toggles the focused accordion item
Tab — Moves between item triggers and interactive content
Screen reader: Each item trigger exposes aria-expanded for its panel.
Notes: Item titles should describe the hidden content, not just say Details.
Props
Name
Type
Default
Description
active
integer
0
Initial active item index for exclusive accordions.
exclusive
boolean
true
When true, opening one item closes the others.
items
array
—
Preview item data for generated examples.
Examples
Guidance accordion
Exclusive accordion for grouped component guidance.
Use for grouped details where only one panel needs attention.
Each trigger announces whether its panel is expanded.
Replace hand-built expandable rows with this shared pattern.
YAML
type: accordion
props:
exclusive: true
active: 0
items:
- title: When to use
content: Use for grouped details where only one panel needs attention.
- title: Accessibility
content: Each trigger announces whether its panel is expanded.
- title: Migration note
content: Replace hand-built expandable rows with this shared pattern.
CollapsibleSection is the panel-flavored disclosure shape used when the header itself needs title, count, and status styling. It is more structured than a bare Disclosure and more focused than a multi-item Accordion.
Readiness
complete
Preview
live
Props
4
Examples
1
Code
implementation mapped
When to use
A single expandable panel with a visible title row
Admin or advanced settings groups that can start collapsed
Sections that need a count badge or danger styling
When not to use
Several sibling expandable rows; use Accordion
Minimal inline reveal patterns; use Disclosure
Content that must always remain visible to complete the workflow
Accessibility
Role: button
Enter — Toggles the section
Space — Toggles the section
Screen reader: The header button controls visibility of the section body.
Notes: Danger styling should indicate risk in the section content, not replace explicit copy.
Props
Name
Type
Default
Description
title*
string
—
Visible section title.
expanded
boolean
true
Initial expanded state.
danger
boolean
false
Applies danger treatment to the section header.
badge_count
integer
—
Optional numeric badge displayed in the header.
Examples
Advanced settings
Advanced settings section with a count badge.
Rules run after the primary validation pass.
YAML
type: collapsible-section
props:
title: Advanced rules
expanded: true
badge_count: 3
slots:
default:
- type: text
props:
kind: muted
value: Rules run after the primary validation pass.
- type: button
props:
variant: secondary
size: small
slots:
default: Edit rules
Disclosure reveals or hides one related panel. It is the smallest accessible reveal primitive: a trigger, an expanded state, and a content panel that stays tied to the trigger.
Readiness
complete
Preview
live
Props
2
Examples
1
Code
implementation mapped
When to use
Optional details under a label, row, or compact settings control
One expandable panel without sibling state coordination
Progressive detail where the default collapsed state keeps scanning fast
When not to use
Multiple sibling panels that coordinate open state; use Accordion
Panel-like sections with title/count/danger chrome; use CollapsibleSection
Content required to complete the task
Accessibility
Role: button
Enter — Toggles the panel
Space — Toggles the panel
Tab — Moves into the trigger and any revealed content
Screen reader: The trigger exposes aria-expanded to announce visibility.
Notes: The trigger text must describe what will be revealed.
Props
Name
Type
Default
Description
expanded
boolean
false
Initial expanded state.
animate
boolean
true
Whether the panel uses the standard expand animation.
Examples
Inline reveal
Reveal a compact explanation below a setting.
This token lets Triform verify incoming webhook calls before running actions.
YAML
type: disclosure
props:
expanded: true
slots:
trigger: Why is this required?
default:
- type: text
props:
kind: muted
value: This token lets Triform verify incoming webhook calls before running actions.
Clamp a block of arbitrary content to a collapsed max-height with a soft fade, then reveal the full content on a single toggle. Use it when a description, comment, log excerpt, or changelog entry is usually too long to show in full but the user should be able to expand it in place without navigating away. The collapsed height is per-instance data; the toggle exposes its state via aria-expanded.
Readiness
complete
Preview
live
Props
4
Examples
3
Code
implementation mapped
When to use
Long free-text descriptions or bios that should preview, then expand
Truncated log / output excerpts with an in-place reveal
Changelog or release-note entries that are long by exception
Any 'read more' affordance over a block of content
When not to use
Titled, section-level expand/collapse — use CollapsibleSection
A list of independently expandable Q&A items — use Accordion
Navigation to a full detail view — use a link or drill-in
Hiding interactive controls a user needs — disclosure is for content, not chrome
Accessibility
Role: button
Enter — Toggle expanded / collapsed.
Space — Toggle expanded / collapsed.
Screen reader: The control is a native button carrying aria-expanded (true/false) that flips on toggle, so assistive tech announces the state change. The label text itself also changes between the more / less labels so state is never conveyed by the chevron alone.
Notes: The chevron rotation and clamp transition are disabled under prefers-reduced-motion. The collapsed fade is decorative; the toggle label always states the action in words.
Props
Name
Type
Default
Description
more_label
string
Show more
Label for the expand control.
less_label
string
Show less
Label for the collapse control.
expanded
boolean
false
Initial expanded state.
collapsed_height
string
6rem
CSS length for the collapsed max-height (per-instance data).
Examples
Clamped description
A long description clamped to a short preview.
Triform is a programmable application substrate where applications are declarative, composable elements defined in YAML. Physics and portal consume generated code from chemistry; element behaviour never lives in view code. This paragraph is intentionally long so the clamp and the soft fade have something to act on before the reader expands it.
YAML
type: show-more
props:
collapsed_height: 3.5rem
slots:
default: Triform is a programmable application substrate where applications are declarative, composable elements defined in YAML. Physics and portal consume generated code from chemistry; element behaviour never lives in view code. This paragraph is intentionally long so the clamp and the soft fade have something to act on before the reader expands it.
Custom labels
Custom labels for a log excerpt.
build: compiling triform-codegen … warning: function never used … build: compiling ui-elements … build: compiling triform-portal … finished release target(s) … this excerpt continues well past the collapsed height so the toggle is meaningful.
YAML
type: show-more
props:
more_label: Show full log
less_label: Collapse log
collapsed_height: 4rem
slots:
default: 'build: compiling triform-codegen … warning: function never used … build: compiling ui-elements … build: compiling triform-portal … finished release target(s) … this excerpt continues well past the collapsed height so the toggle is meaningful.'
Pre-expanded
Initially expanded.
Starts open: the toggle reads 'Show less' and collapses the content on click.
YAML
type: show-more
props:
expanded: true
collapsed_height: 3rem
slots:
default: 'Starts open: the toggle reads ''Show less'' and collapses the content on click.'
