A vertical stack of disclosures that opens one item at a time, or several.
<tp-accordion>
Accordion
Default density
Compact density
Restart from the initial state
Show the copyable source
Can I change plans later?
Yes. Upgrades take effect immediately and are prorated on your next invoice. Downgrades apply at the end of the current billing period.
How are seats counted?
Every member with access to at least one project uses a seat. Guests and viewers on public links are free.
What happens to my data if I cancel?
Your workspace stays readable for 30 days, and you can export every project as a ZIP archive before it is deleted.
Can I change plans later?
Yes. Upgrades take effect immediately and are prorated on your next invoice. Downgrades apply at the end of the current billing period.
How are seats counted?
Every member with access to at least one project uses a seat. Guests and viewers on public links are free.
What happens to my data if I cancel?
Your workspace stays readable for 30 days, and you can export every project as a ZIP archive before it is deleted.
<tp-accordion variant="outline" default-value="plans" style="max-inline-size:34rem">
<tp-accordion-item value="plans">
<span slot="label">Can I change plans later?</span>
<p>Yes. Upgrades take effect immediately and are prorated on your next invoice. Downgrades apply at the end of the current billing period.</p>
</tp-accordion-item>
<tp-accordion-item value="seats">
<span slot="label">How are seats counted?</span>
<p>Every member with access to at least one project uses a seat. Guests and viewers on public links are free.</p>
</tp-accordion-item>
<tp-accordion-item value="cancel">
<span slot="label">What happens to my data if I cancel?</span>
<p>Your workspace stays readable for 30 days, and you can export every project as a ZIP archive before it is deleted.</p>
</tp-accordion-item>
</tp-accordion>
Usage
Each tp-accordion-item renders a heading with a native button trigger and a content panel. Put the trigger text in slot="label"; everything unslotted becomes the panel. Give every item a stable, unique value, which is what value and default-value refer to. Headings default to h2; set heading-level on each item to fit the page outline. The value HTML attribute is a whitespace-separated list; in JavaScript, accordion.value is an ordered string[]. The component derives selected items in registration order. In non-collapsible single mode, it opens the first available item when none is selected. Only direct <tp-accordion-item> children register as Items; a bare <div> directly inside the Root is not an Item.
Variants
Variants
Default density
Compact density
Restart from the initial state
Show the copyable source
Shipping
Orders over $50 ship free within 3–5 business days.
Returns
Return unused items within 30 days for a full refund.
Shipping
Orders over $50 ship free within 3–5 business days.
Returns
Return unused items within 30 days for a full refund.
Shipping
Orders over $50 ship free within 3–5 business days.
Returns
Return unused items within 30 days for a full refund.
Shipping
Orders over $50 ship free within 3–5 business days.
Returns
Return unused items within 30 days for a full refund.
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:var(--tp-space-6)">
<tp-accordion variant="line" default-value="shipping">
<tp-accordion-item value="shipping">
<span slot="label">Shipping</span>
<p>Orders over $50 ship free within 3–5 business days.</p>
</tp-accordion-item>
<tp-accordion-item value="returns">
<span slot="label">Returns</span>
<p>Return unused items within 30 days for a full refund.</p>
</tp-accordion-item>
</tp-accordion>
<tp-accordion variant="separated" default-value="shipping">
<tp-accordion-item value="shipping">
<span slot="label">Shipping</span>
<p>Orders over $50 ship free within 3–5 business days.</p>
</tp-accordion-item>
<tp-accordion-item value="returns">
<span slot="label">Returns</span>
<p>Return unused items within 30 days for a full refund.</p>
</tp-accordion-item>
</tp-accordion>
</div>
variant describes how items relate visually: plain adds no chrome, line separates items, outline wraps them in one container and separated gives each its own surface. It never changes behavior.
Multiple and collapsible
Multiple open items
Default density
Compact density
Restart from the initial state
Show the copyable source
Notifications
Email me when someone mentions me or assigns me a task.
Privacy
Only workspace members can see your profile and activity.
Active sessions
Signed in on MacBook Pro · Lisbon, and iPhone 15 · Lisbon.
Notifications
Email me when someone mentions me or assigns me a task.
Privacy
Only workspace members can see your profile and activity.
Active sessions
Signed in on MacBook Pro · Lisbon, and iPhone 15 · Lisbon.
<tp-accordion selection-mode="multiple" variant="outline" default-value="notifications privacy" style="max-inline-size:34rem">
<tp-accordion-item value="notifications">
<span slot="label">Notifications</span>
<p>Email me when someone mentions me or assigns me a task.</p>
</tp-accordion-item>
<tp-accordion-item value="privacy">
<span slot="label">Privacy</span>
<p>Only workspace members can see your profile and activity.</p>
</tp-accordion-item>
<tp-accordion-item value="sessions">
<span slot="label">Active sessions</span>
<p>Signed in on MacBook Pro · Lisbon, and iPhone 15 · Lisbon.</p>
</tp-accordion-item>
</tp-accordion>
Single mode keeps one item open, so the last open item can’t close unless you add collapsible. Use selection-mode="multiple" when readers compare sections side by side.
Leading and trailing content
Positional content
Default density
Compact density
Restart from the initial state
Show the copyable source
01Complete your profileDone
Add a photo and job title so teammates recognize you.
02Invite teammates
Send invites by email or share a link that expires in 7 days.
Connect GitHubOptional
Link pull requests to tasks and close them automatically on merge.
01Complete your profileDone
Add a photo and job title so teammates recognize you.
02Invite teammates
Send invites by email or share a link that expires in 7 days.
Connect GitHubOptional
Link pull requests to tasks and close them automatically on merge.
<tp-accordion variant="separated" content-alignment="label" default-value="profile" style="max-inline-size:34rem">
<tp-accordion-item value="profile">
<span slot="leading" aria-hidden="true">01</span>
<span slot="label">Complete your profile</span>
<tp-badge slot="trailing" variant="secondary">Done</tp-badge>
<p>Add a photo and job title so teammates recognize you.</p>
</tp-accordion-item>
<tp-accordion-item value="invite">
<span slot="leading" aria-hidden="true">02</span>
<span slot="label">Invite teammates</span>
<p>Send invites by email or share a link that expires in 7 days.</p>
</tp-accordion-item>
<tp-accordion-item value="connect" indicator-position="leading">
<span slot="label">Connect GitHub</span>
<tp-badge slot="trailing" variant="outline">Optional</tp-badge>
<p>Link pull requests to tasks and close them automatically on merge.</p>
</tp-accordion-item>
</tp-accordion>
The leading and trailing slots take numbers, icons, badges or status text, but nothing interactive: they live inside the trigger button. content-alignment="label" lines the panel up with the label, whatever the leading content’s width. indicator-position moves the chevron. leading and trailing follow writing direction, so Leading is on the right in RTL. Decorative content should be aria-hidden="true"; meaningful status text may remain in the accessibility tree when it should augment the Trigger’s name.
Disabled
Disabled item
Default density
Compact density
Restart from the initial state
Show the copyable source
Team settings
Manage roles, default permissions and project templates.
Single sign-onEnterprise
Configure SAML with Okta, Azure AD or Google Workspace.
Team settings
Manage roles, default permissions and project templates.
Single sign-onEnterprise
Configure SAML with Okta, Azure AD or Google Workspace.
<tp-accordion variant="outline" default-value="team" style="max-inline-size:34rem">
<tp-accordion-item value="team">
<span slot="label">Team settings</span>
<p>Manage roles, default permissions and project templates.</p>
</tp-accordion-item>
<tp-accordion-item value="sso" disabled>
<span slot="label">Single sign-on</span>
<tp-badge slot="trailing" variant="outline">Enterprise</tp-badge>
<p>Configure SAML with Okta, Azure AD or Google Workspace.</p>
</tp-accordion-item>
</tp-accordion>
disabled on one item locks only that item; on the root it locks all of them. Triggers are native buttons, so Enter and Space toggle, and Tab moves between items.
Content motion
Line-by-line reveal
Default density
Compact density
Restart from the initial state
Show the copyable source
Set up your workspace
Pick a name and URL. You can change both later in workspace settings.
Invite the people you work with most; they get an email with a link that expires in 7 days.
Import projects from Jira, Linear or a CSV export.
Connect your tools
Link GitHub to attach pull requests to tasks.
Add Slack to get a digest of mentions and due dates every morning.
Set up your workspace
Pick a name and URL. You can change both later in workspace settings.
Invite the people you work with most; they get an email with a link that expires in 7 days.
Import projects from Jira, Linear or a CSV export.
Connect your tools
Link GitHub to attach pull requests to tasks.
Add Slack to get a digest of mentions and due dates every morning.
<tp-accordion variant="outline" collapsible style="max-inline-size:34rem">
<tp-accordion-item value="setup">
<span slot="label">Set up your workspace</span>
<tp-scroll-trigger reveal="up" stagger="80" reveal-repeat>
<p><tp-mo-text-split split="lines" mask="lines">Pick a name and URL. You can change both later in workspace settings.</tp-mo-text-split></p>
<p><tp-mo-text-split split="lines" mask="lines">Invite the people you work with most; they get an email with a link that expires in 7 days.</tp-mo-text-split></p>
<p><tp-mo-text-split split="lines" mask="lines">Import projects from Jira, Linear or a CSV export.</tp-mo-text-split></p>
</tp-scroll-trigger>
</tp-accordion-item>
<tp-accordion-item value="integrations">
<span slot="label">Connect your tools</span>
<tp-scroll-trigger reveal="up" stagger="80" reveal-repeat>
<p><tp-mo-text-split split="lines" mask="lines">Link GitHub to attach pull requests to tasks.</tp-mo-text-split></p>
<p><tp-mo-text-split split="lines" mask="lines">Add Slack to get a digest of mentions and due dates every morning.</tp-mo-text-split></p>
</tp-scroll-trigger>
</tp-accordion-item>
</tp-accordion>
Text split reveals a panel’s lines each time its item opens. A Scroll trigger with reveal-repeat sequences the paragraphs, and a closed panel is hidden, so its lines reset for the next opening.
Each item asks for motion with a bubbling tp-motion-request. Claim only the content role to stagger the panel’s paragraphs; the accordion still measures the panel, animates its height and decides which item is open. Because the request bubbles, a listener on one item claims motion for that item only, and a listener on the accordion covers all of them.
Limits
There is no distinct controlled-value mode: an accepted trigger interaction updates value even when the host set it externally.
On item registration or rebuild in non-collapsible single mode, an empty or unknown value is replaced by the first available item. A programmatic multi-value list in single mode presents only its first available item, but the property can retain extra values until rebuild.
When the open item is removed or disabled, fallback selection uses the first enabled item.
An absent panel is hidden but remains in the DOM.
API Reference
Every element also accepts motion-policy.
Attributes
AttributePropertyTypeDefaultDescriptionselection-modeselectionMode'single' | 'multiple''single'Whether one item can be open at a time, or several, for sections readers compare side by side.variantvariantAccordionVariant'plain'How the items relate visually, from no chrome to separated surfaces; never changes behavior.valuevalueAccordionValue[]The values of the open items, in order; accepted interactions update it.default-valuedefaultValueAccordionValue[]Items open at first when value is empty; later changes do not reset the selection.collapsiblecollapsiblebooleanfalseIn single selection, lets the last open item close.keep-mountedkeepMountedbooleanfalseKeeps the content of closed items in the page instead of removing it.hidden-until-foundhiddenUntilFoundbooleanfalseKeeps the content of closed items searchable by the browser's find in page, which opens the matching item.content-alignmentcontentAlignmentAccordionContentAlignment'edge'Default alignment of every item's content: at the outer edge, or lined up with the label.
Properties
PropertyTypeDefaultDescriptiononValueChange((event: TpValueChangeEvent<AccordionValue>) => void) | undefined—Called after a proposal of the open items is accepted.
Events
EventTypeDescriptiontp-value-changeTpValueChangeEvent<string[]>Cancelable proposal of the open items, after the items' own proposals; detail.value lists their values in order.tp-open-changeTpOpenChangeEventCancelable proposal to open or close one item, dispatched from that item for each item whose state would change.tp-open-change-completeCustomEvent<{ value: string; open: boolean; }>From an item after its content finishes opening or closing; detail.value and detail.open.
Slots
SlotDescriptiondefaultThe Accordion Items.
CSS parts
PartDescription::part(accordion)The root around the items.
<tp-accordion-item>
Attributes
AttributePropertyTypeDefaultDescriptionvaluevaluestring''Stable identity of the item, which the accordion's value lists when it is open.indicator-positionindicatorPositionAccordionIndicatorPosition'trailing'The side of the trigger that draws the chevron, in writing direction.content-alignmentcontentAlignmentAccordionContentAlignment | undefinedundefinedOverrides the accordion's content alignment for this item.heading-levelheadingLevelnumber2Level of the item's heading; set it to fit the page outline.
Properties
PropertyTypeDefaultDescriptiononOpenChange((event: TpOpenChangeEvent) => void) | undefined—Called after the accordion accepts a proposal to open or close this item.
Methods
MethodReturnsDescriptionfocus(options?)voidMoves focus to the trigger.
Slots
SlotDescriptiondefaultThe content shown when open.labelThe trigger text.leadingNon-interactive content before the label, such as a step number; it replaces the chevron when the indicator sits on this side.trailingNon-interactive content after the label, such as a badge; it replaces the chevron when the indicator sits on this side.