@askrjs/ui/collapsible

Collapsibletype

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

Renders a part of `collapsible`.

COLLAPSIBLE_A11Y_CONTRACTtype

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

CollapsibleContenttype

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

Renders the `collapsible-content` part of `collapsible`. Supports polymorphic rendering via `asChild`.

CollapsibleContentAsChildPropstype

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

CollapsibleContentPropstype

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

CollapsiblePropstype

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

CollapsibleTriggertype

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

Renders the `collapsible-trigger` part of `collapsible`. Supports polymorphic rendering via `asChild`.

CollapsibleTriggerAsChildPropstype

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

CollapsibleTriggerPropstype

CollapsibleTriggerProps: any

Trigger component props (button semantics)

asChild

Render as child element instead of button

children

Child content

ref

Ref forwarding