---
title: Collapsible
description: Disclose one content region from a caller-placed trigger.
package: moraine
version: 0.6.0
repository: https://github.com/subframe7536/moraine
---
# Collapsible
> Disclose one content region from a caller-placed trigger.
Use Collapsible for one disclosure whose trigger and content belong to the surrounding layout. Use [Accordion](https://moraine.subf.dev/components/accordion.md) when several disclosures share selection rules.
## Basic usage
```tsx
import { Collapsible } from 'moraine'
export function Example() {
return (
DetailsMore information
)
}
```
## Anatomy
```text
Collapsible [component; slot=root]
├── Collapsible.Trigger [part; slot=trigger]
└── contentWrapper [internal]
└── Collapsible.Content [part; slot=content]
```
## Usage
### Styling
Configure `root`, `trigger`, and `content` through `collapsible.base` in your Theme. The Content element exposes `data-expanded` and `data-closed` for state styling. Collapsible also renders an internal wrapper with `data-expanded`, `data-closed`, and `data-transition` for measurement, height animation, presence, and accessibility; you cannot configure that wrapper through Theme, `classes`, `styles`, or Content props.
Root `classes` and `styles` set defaults for this Collapsible. Use direct `class` and `style` on the root, Trigger, or Content to style those elements. Content's `ref` and `as` apply to the inner Content element. `CollapsibleT.Slot`, `CollapsibleT.Classes`, and `CollapsibleT.Styles` type the slot overrides. There are no visual variants. See [Styling](https://moraine.subf.dev/docs/customization.md#the-4-layer-override-hierarchy) for override precedence.
```tsx
import { Collapsible, MoraineProvider } from 'moraine'
import { defineTheme } from 'moraine/theme'
const theme = defineTheme({
collapsible: {
base: {
root: 'w-full rounded-lg border border-border',
trigger: 'w-full px-4 py-3 text-left font-medium text-blue-600',
content: 'border-t border-border p-4 text-sm text-muted-foreground',
},
},
})
export function DesignStyling() {
return (
Project details
Theme slots provide defaults; instance and child styles refine this disclosure.
)
}
```
### State ownership
Use `open` with `onOpenChange` for controlled state, or `defaultOpen` when the component owns its initial state. The trigger and content primitives may be composed into a custom layout.
```tsx
import { Button, Collapsible } from 'moraine'
import { createSignal } from 'solid-js'
export function StateOwnership() {
const [open, setOpen] = createSignal(false)
return (
)
}
```
### Content lifetime
The content shell stays mounted so the trigger's `aria-controls` points to a real element even while closed. `unmountOnHide` controls the user content inside it. Keep user content mounted when it holds state that should survive closing.
```tsx
import { Button, Collapsible, Input } from 'moraine'
export function ContentLifetime() {
return (
Persistent filter fields
Input state persists while closed when unmountOnHide is false.
)
}
```
### Keyboard interaction
The trigger uses button semantics by default. A polymorphic trigger follows the keyboard semantics of its supplied element or component.
## Examples
### Uncontrolled state
```tsx
import { Card, Collapsible, Icon, Switch } from 'moraine'
import { createSignal } from 'solid-js'
export function Uncontrolled() {
const [transition, setTransition] = createSignal(true)
return (
How do I reset my password?
You can reset your password from Account settings. We send a verification link to
the primary email on the workspace.
)
}
```
### Controlled state
```tsx
import { Button, Collapsible, Icon, Switch } from 'moraine'
import { createSignal } from 'solid-js'
export function Controlled() {
const [open, setOpen] = createSignal(true)
const [locked, setLocked] = createSignal(false)
return (
June invoice #INV-2048
PlanTeam Pro
Seats18 active
Locked invoices cannot be expanded from the row trigger.