Collapsible

Overview

@badrinteractive starred 3 repos

Collapsible provides a simple toggle to show or hide a section of content. Unlike Accordion, it manages a single open/close state without any grouping logic — ideal for sidebars, filters, and expandable detail panels.

Use Accordion when you need multiple collapsible sections with grouped behavior. Use Collapsible for a single standalone expand/collapse.

Installation

npm install @araf-ds/core

yarn add @araf-ds/core

pnpm add @araf-ds/core

Usage

import {
  Collapsible,
  CollapsibleTrigger,
  CollapsibleContent,
} from "@araf-ds/core"

export default function Example() {
  const [open, setOpen] = useState(false)

  return (
    <Collapsible open={open} onOpenChange={setOpen}>
      <div className="flex items-center justify-between">
        <h4 className="text-sm font-medium">Starred repositories</h4>
        <CollapsibleTrigger asChild>
          <Button variant="ghost" size="sm">
            <ChevronsUpDown size={14} />
          </Button>
        </CollapsibleTrigger>
      </div>
      <div className="text-sm">@badrinteractive/araf-ds-core</div>
      <CollapsibleContent>
        <div className="text-sm">@badrinteractive/araf-ds-docs</div>
        <div className="text-sm">@badrinteractive/araf-ds-tokens</div>
      </CollapsibleContent>
    </Collapsible>
  )
}

Variants

Basic

Starred repositories

@badrinteractive/araf-ds-core

@badrinteractive/araf-ds-docs

@badrinteractive/araf-ds-tokens

<Collapsible open={isOpen} onOpenChange={setIsOpen} className="space-y-2">
  <div className="flex items-center justify-between">
    <h4 className="text-sm font-semibold">Starred repositories</h4>
    <CollapsibleTrigger asChild>
      <Button variant="ghost" size="sm">
        <ChevronsUpDownIcon size={14} />
        <span className="sr-only">Toggle</span>
      </Button>
    </CollapsibleTrigger>
  </div>
  <div className="rounded-md border px-4 py-2 text-sm">
    @badrinteractive/araf-ds-core
  </div>
  <CollapsibleContent className="space-y-2">
    <div className="rounded-md border px-4 py-2 text-sm">
      @badrinteractive/araf-ds-docs
    </div>
    <div className="rounded-md border px-4 py-2 text-sm">
      @badrinteractive/araf-ds-tokens
    </div>
  </CollapsibleContent>
</Collapsible>

A common pattern for sidebar filter sections.

Status

<Collapsible defaultOpen>
  <CollapsibleTrigger className="flex w-full items-center justify-between py-2">
    <span className="text-sm font-semibold">Status</span>
    <ChevronUpIcon size={14} />
  </CollapsibleTrigger>
  <CollapsibleContent className="space-y-1">
    {statuses.map(status => (
      <label key={status} className="flex items-center gap-2 cursor-pointer">
        <Checkbox />
        <span className="text-sm">{status}</span>
      </label>
    ))}
  </CollapsibleContent>
</Collapsible>

API Reference

boolean

Controlled open state.

(open: boolean) => void

Callback fired when open state changes.

boolean

default:"false"

Uncontrolled default open state.

boolean

default:"false"

Prevents the collapsible from being opened or closed.

CollapsibleTrigger

boolean

default:"false"

Render as a child element (e.g. a Button) instead of a default <button>.

CollapsibleContent

Animates open and close with a CSS height transition. No additional props required.

Accessibility

CollapsibleTrigger renders as <button> with aria-expanded="true|false"
CollapsibleContent has aria-hidden="true" when closed
The trigger and content are linked via aria-controls and id
Keyboard: Space/Enter on the trigger toggles open state

Do’s & Don’ts

Do

Use defaultOpen for sections that should start expanded
Always show some content outside the collapsible as a summary
Use asChild to make any element the trigger (a heading, row, etc.)
Use Collapsible for single sections; Accordion for multiple grouped sections

Don't

Don’t hide critical information inside a collapsed section by default
Don’t use Collapsible when only one section should be open at a time — use Accordion with type="single"
Don’t nest Collapsibles more than 2 levels deep
Don’t forget a visible toggle indicator (chevron icon) for discoverability

Actions

Forms

Data Display

Feedback

Navigation

Layout

Charts

Icons

Collapsible

Overview

Installation

Usage

Variants

Basic

Filter Panel

API Reference

Collapsible

CollapsibleTrigger

CollapsibleContent

Accessibility

Do’s & Don’ts

Do

Don't

​Overview

​Installation

​Usage

​Variants

​Basic

​Filter Panel

​API Reference

​Collapsible

​CollapsibleTrigger

​CollapsibleContent

​Accessibility

​Do’s & Don’ts

Do

Don't

Overview

Installation

Usage

Variants

Basic

Filter Panel

API Reference

Collapsible

CollapsibleTrigger

CollapsibleContent

Accessibility

Do’s & Don’ts