# @askrjs/ui/collapsible

> Published API exports for @askrjs/ui/collapsible.

Source: [https://askrjs.com/docs/reference/api/ui/collapsible](https://askrjs.com/docs/reference/api/ui/collapsible)

Status: stable. Packages: @askrjs/ui/collapsible.

**Published packages are authoritative.** Examples may lag behind a published contract. When guidance differs, verify the exports and TypeScript declarations in your installed package, then file an issue.

## Exports

This entrypoint publishes 9 exports from the declarations shipped by @askrjs/ui.

### `Collapsible`

```ts
Collapsible: (props: CollapsibleProps) => JSX.Element
```

Renders a part of `collapsible`.

### `COLLAPSIBLE_A11Y_CONTRACT`

```ts
COLLAPSIBLE_A11Y_CONTRACT: { readonly TRIGGER_ROLE: "button"; readonly KEYBOARD_ACTIVATION: readonly ["Enter", "Space"]; readonly EXPANDED_ATTRIBUTE: "aria-expanded"; readonly CONTROLS_ATTRIBUTE: "aria-controls"; readonly DATA_ATTRIBUTES: { readonly slot: "data-slot"; readonly state: "data-state"; readonly disabled: "data-disabled"; }; readonly CONTENT_REQUIREMENTS: { readonly idAttribute: "required"; readonly defaultPresence: "unmounted when closed"; }; readonly FOCUS_RULES: { readonly afterActivation: "focus remains on trigger"; readonly contentFocusable: false; }; }
```

WAI-ARIA Disclosure Pattern (Collapsible)

Specification: https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/

A disclosure (collapsible) shows and hides a region of content via a button.
The button indicates the visibility state of the content region.

## Required ARIA
- Trigger: role="button" (native or explicit)
- Trigger: aria-expanded="true" | "false"
- Trigger: aria-controls={contentId}
- Content: id attribute for aria-controls reference

## Keyboard Support
- Enter: Toggles content visibility (on trigger)
- Space: Toggles content visibility (on trigger)

## Focus Management
- Trigger is focusable when not disabled
- Focus remains on trigger after activation
- Content is not focusable by default

## Disabled State
- Trigger cannot be activated when disabled
- Visual disabled styling (consumer responsibility)

## Presence
- Content unmounts when closed (default)
- Can force mount for animation/transition control

### `CollapsibleContent`

```ts
CollapsibleContent: { (props: CollapsibleContentProps): JSX.Element | null; (props: CollapsibleContentAsChildProps): JSX.Element | null; }
```

Renders the `collapsible-content` part of `collapsible`.

Supports polymorphic rendering via `asChild`.

### `CollapsibleContentAsChildProps`

```ts
CollapsibleContentAsChildProps: any
```

Props for the `asChild` (polymorphic) rendering of Collapsible Content.

- `asChild`: Render as child element instead of div

- `children`: Child content

- `forceMount`: Force mount even when closed (for animation)

- `ref`: Ref forwarding

### `CollapsibleContentProps`

```ts
CollapsibleContentProps: any
```

Content component props

- `asChild`: Render as child element instead of div

- `children`: Child content

- `forceMount`: Force mount even when closed (for animation)

- `ref`: Ref forwarding

### `CollapsibleProps`

```ts
CollapsibleProps: any
```

Root component props

- `children`: Child components (Trigger, Content)

- `defaultOpen`: Uncontrolled default open state

- `disabled`: Whether the collapsible is disabled

- `id`: Stable caller-provided identity used for ARIA linking when available

- `onOpenChange`: Callback when open state changes

- `open`: Controlled open state

### `CollapsibleTrigger`

```ts
CollapsibleTrigger: { (props: CollapsibleTriggerProps): JSX.Element; (props: CollapsibleTriggerAsChildProps): JSX.Element; }
```

Renders the `collapsible-trigger` part of `collapsible`.

Supports polymorphic rendering via `asChild`.

### `CollapsibleTriggerAsChildProps`

```ts
CollapsibleTriggerAsChildProps: any
```

Props for the `asChild` (polymorphic) rendering of Collapsible Trigger.

- `asChild`: Render as child element instead of button

- `children`: Child content

- `ref`: Ref forwarding

### `CollapsibleTriggerProps`

```ts
CollapsibleTriggerProps: any
```

Trigger component props (button semantics)

- `asChild`: Render as child element instead of button

- `children`: Child content

- `ref`: Ref forwarding

## Documentation navigation

[Previous](https://askrjs.com/docs/reference/api/ui/alert-dialog/index.md) | [Next](https://askrjs.com/docs/reference/api/ui/dialog/index.md)