Collapsible

Collapsible

<Collapsible title="Advanced options">
  <p>Hidden by default. Click the header to reveal.</p>
</Collapsible>

Install: @helixui/core

import { Collapsible } from '@helixui/core'

status: stable · since: 0.1.0

Tags: disclosure, expand, accordion, show-hide

Anatomy

[▶ Title]                 ← collapsed
[▼ Title]
   <children>                ← expanded

Layout

• display — block
• width — fill
• height — content
• intrinsicSize — header always visible, body animates open/closed
• stackable — true
• fullBleed — false

Visual

A header row with a rotating chevron and a body that animates its height when toggled. Header uses font.weight.semibold and a hover surface; body uses default text.

Props

Name	Type	Default	Description
title	ReactNode	—	Header label. Required.
isExpanded	boolean	—	Controlled expanded state.
defaultExpanded	boolean	false	Uncontrolled initial.
onExpandedChange	(expanded: boolean) => void	—	Change handler.
isDisabled	boolean	false	Disables toggling.

Slots

• children — panel content

Tokens used

color.bg.surface.default, color.bg.action.neutral.default, color.text.primary, color.text.secondary, color.border.default, color.border.focus, radius.md, space.3, space.4, font.family.sans, font.size.md, font.size.sm, font.weight.medium

Accessibility

Notes

• Built on react-aria-components Disclosure — full ARIA expanded/controls and keyboard handled.
• For multiple coordinated collapsibles, use DisclosureGroup directly from react-aria-components.

Composes with

Component	Relation	Note
Stack	parent	Group multiple Collapsibles in a Stack for an accordion.
NavigationMenu	sibling
Tabs	sibling

Prompt examples

These are the AI prompt → JSX mappings used by the helixui prompt DSL and integrations like Cursor / Claude Code.

FAQ entry

“expandable FAQ question”

<Collapsible title="What is helixui?">
  helixui is an AI-friendly design system.
</Collapsible>

Related

• NavigationMenu
• Tabs