Collapsible Primitive
Collapsible is a Starwind Runtime primitive in the presence-disclosure-control contract family.
Anatomy
Use the Astro primitive adapter to render Collapsible anatomy with the Runtime wiring included.
---import { Collapsible } from "@starwind-ui/astro/collapsible";---
<Collapsible.Root> <Collapsible.Trigger>Toggle details</Collapsible.Trigger> <Collapsible.Panel>Collapsible content</Collapsible.Panel></Collapsible.Root>Use the React primitive adapter when Collapsible state participates in React rendering.
import { Collapsible } from "@starwind-ui/react/collapsible";
export function Example() { return ( <Collapsible.Root> <Collapsible.Trigger>Toggle details</Collapsible.Trigger> <Collapsible.Panel>Collapsible content</Collapsible.Panel> </Collapsible.Root> );}Render the Collapsible data-sw-* contract yourself, then initialize createCollapsible.
<div data-sw-collapsible> <button data-sw-collapsible-trigger>Toggle details</button> <div data-sw-collapsible-panel hidden>Collapsible content</div></div>
<script type="module"> import { createCollapsible } from "@starwind-ui/runtime/collapsible";
const root = document.querySelector("[data-sw-collapsible]"); if (root) { createCollapsible(root); }</script>API Reference
Root
The main element that owns the Collapsible Runtime instance.
- Default element
- div
- Discovery hook
- data-sw-collapsible
- Role
- -
Props
Prop Type Default Toggle
open boolean -
- Description
- Controls whether Collapsible is open.
- Kind
- control
- Targets
- -
- Full type
- boolean
defaultOpen boolean false
- Description
- Sets whether Collapsible starts open.
- Kind
- control
- Targets
- -
- Full type
- boolean
disabled boolean false
- Description
- Disables the Root part.
- Kind
- option
- Targets
- -
- Full type
- boolean
onOpenChange (open: boolean, details: CollapsibleOpenChangeDetails) => void -
- Description
- Runs when Collapsible opens or closes.
- Kind
- callback
- Targets
- -
- Full type
- (open: boolean, details: CollapsibleOpenChangeDetails) => void
Events
Event Callback Value Toggle
openChange onOpenChange open: boolean
- Description
- Fires when Collapsible opens or closes.
- DOM event
- starwind:open-change
- Details type
- CollapsibleOpenChangeDetails
- Timing
- before-state-commit
- Cancelable
- Yes
State
State Type Props Toggle
open boolean open / defaultOpen
- Description
- Tracks whether Collapsible is open.
- Initial attribute
- data-default-open
- Runtime getter
- getOpen
- Runtime setter
- setOpen
- State control support
- React supports controlled and default state with open and defaultOpen props. Runtime/HTML reads initial state from data-default-open, emits starwind:open-change, and updates with setOpen. Astro adapters render initial/default state, but do not expose reactive controlled-state props for this state.
Data Attributes
Runtime hooks
Attribute Value Description
data-sw-collapsible - Marks the Root part so Starwind Runtime can find it.
State
Attribute Value Description
data-state - Reflects the current state on the Root part.
Metadata
Attribute Value Description
data-default-open - Reflects the default open prop on the Root part.
data-disabled - Reflects the disabled prop on the Root part.
Trigger
The control that opens, closes, or targets the Collapsible content.
- Default element
- button
- Discovery hook
- data-sw-collapsible-trigger
- Role
- -
Props
Prop Type Default Toggle
asChild boolean false
- Description
- Merges behavior onto your child element instead of rendering the default Trigger element.
- Kind
- rendering
- Targets
- trigger
- Full type
- boolean
Data Attributes
Runtime hooks
Attribute Value Description
data-sw-collapsible-trigger - Marks the Trigger part so Starwind Runtime can find it.
State
Attribute Value Description
data-state - Reflects the current state on the Trigger part.
Panel
The content panel controlled by Collapsible.
- Default element
- div
- Discovery hook
- data-sw-collapsible-panel
- Role
- -
Props
Prop Type Default Toggle
hiddenUntilFound boolean false
- Description
- Changes how the Panel part is rendered.
- Kind
- rendering
- Targets
- panel
- Full type
- boolean
Data Attributes
Runtime hooks
Attribute Value Description
data-sw-collapsible-panel - Marks the Panel part so Starwind Runtime can find it.
State
Attribute Value Description
data-state - Reflects the current state on the Panel part.
Metadata
Attribute Value Description
data-hidden-until-found - Reflects the hidden until found prop on the Panel part.
Runtime API
- Factory
createCollapsible- Import
@starwind-ui/runtime/collapsible- Root hook
- root
data-sw-collapsible - Option props
- defaultOpen, disabled, open
Runtime Setters
Method Target Description
setOpen state: open Opens or closes Collapsible from Runtime code.
Related Styled Components
Component Relationship
Collapsible Direct primitive