Skip to main content

​
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

​
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>

​
Filter Panel

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

​
Collapsible

​
open
boolean
Controlled open state.
​
onOpenChange
(open: boolean) => void
Callback fired when open state changes.
​
defaultOpen
boolean
default:"false"
Uncontrolled default open state.
​
disabled
boolean
default:"false"
Prevents the collapsible from being opened or closed.

​
CollapsibleTrigger

​
asChild
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