A single show/hide disclosure — the primitive behind an accordion item, without the sibling coordination.
ClosedOpenDisabled
Requests to api-gateway are retried three times before the deploy rolls back.
Nothing archived yet.
<Collapsible bind:open> {#snippet trigger()}Advanced options{/snippet} <p>Requests to api-gateway are retried three times before the deploy rolls back.</p></Collapsible>Installation
pnpm add @chanrg/4uiImport the stylesheet once, at the root of your app:
import '@chanrg/4ui/styles.css';Usage
import { Collapsible } from '@chanrg/4ui';<Collapsible bind:open> {#snippet trigger()}Advanced options{/snippet} <p>Requests to api-gateway are retried three times before the deploy rolls back.</p></Collapsible>Composition
Use the following composition to build a collapsible:
Collapsible ├── trigger (snippet) └── region (content)
API reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean ($bindable) | false | Whether the content is revealed. |
disabled | boolean | false | Blocks toggling and dims the trigger. |
trigger / children | Snippet | — | Contents of the trigger button, and the content it reveals. |
onopenchange | (open) => void | — | Fires after each toggle. |
CSS variables
| Variable | Description |
|---|---|
--4ui-surface | Primary component surface. |
--4ui-text | Primary foreground color. |
--4ui-border | Default control and panel border. |
Accessibility
- The trigger is a native button, so Enter and Space work without any key handling of its own.
- aria-expanded and aria-controls point at a region labelled by the trigger.
- The collapsed content stays mounted but inert, keeping it out of the tab order while aria-controls still resolves.