Skip to content

index.mdx

Latest commit

 

History

History
75 lines (47 loc) · 1.55 KB

index.mdx

File metadata and controls

75 lines (47 loc) · 1.55 KB
title Collapsible
description An interactive component that toggles the visibility of its content panel.
source packages/raystack/components/collapsible
tag new

import { preview, controlledDemo, defaultOpenDemo, disabledDemo, } from "./demo.ts";

Anatomy

Import and assemble the component:

import { Collapsible } from '@raystack/apsara'

<Collapsible>
  <Collapsible.Trigger />
  <Collapsible.Panel />
</Collapsible>

API Reference

Root

Groups all parts of the collapsible.

Trigger

A button that toggles the visibility of the panel.

Panel

Contains the collapsible content.

Examples

Controlled

You can control the collapsible state by providing open and onOpenChange props.

Default Open

Use defaultOpen to have the panel initially expanded.

Disabled

The collapsible can be disabled to prevent user interaction.

Accessibility

  • The Trigger uses aria-expanded to indicate the open/closed state of the panel.
  • Supports keyboard interaction with Enter and Space to toggle the panel.
  • The Panel is automatically associated with the Trigger via aria-controls.
  • Respects motion preferences: panel expand/collapse motion is enabled only when prefers-reduced-motion: no-preference