Collapsible

An interactive component which expands/collapses a panel.

@barefootjs/dom has 3 repositories

@barefootjs/dom

@barefootjs/jsx

@barefootjs/hono

open

disabled

#Installation

bunx --bun barefoot add collapsible

#Usage

@barefootjs/dom has 3 repositories

@barefootjs/dom

@barefootjs/jsx

@barefootjs/hono

1import {2  Collapsible,3  CollapsibleTrigger,4  CollapsibleContent,5} from '@/components/ui/collapsible'

#Examples

#Basic

@barefootjs/dom has 3 repositories

@barefootjs/dom

@barefootjs/jsx

@barefootjs/hono

1"use client"23import { createSignal } from '@barefootjs/dom'4import {5  Collapsible,6  CollapsibleTrigger,7  CollapsibleContent,8} from '@/components/ui/collapsible'9import { Button } from '@/components/ui/button'10import { ChevronDownIcon } from '@/components/ui/icon'1112function CollapsibleBasic() {13  return (14    <Collapsible defaultOpen class="space-y-2">15      <div className="flex items-center justify-between space-x-4">16        <h4 className="text-sm font-semibold">17          @barefootjs/dom has 3 repositories18        </h4>19        <CollapsibleTrigger asChild>20          <Button variant="ghost" size="sm" className="w-9 p-0">21            <ChevronDownIcon size="sm" />22            <span className="sr-only">Toggle</span>23          </Button>24        </CollapsibleTrigger>25      </div>26      <div className="rounded-md border px-4 py-2 font-mono text-sm">27        @barefootjs/dom28      </div>29      <CollapsibleContent class="space-y-2">30        <div className="rounded-md border px-4 py-2 font-mono text-sm">31          @barefootjs/jsx32        </div>33        <div className="rounded-md border px-4 py-2 font-mono text-sm">34          @barefootjs/hono35        </div>36      </CollapsibleContent>37    </Collapsible>38  )39}

#Controlled

Starred Repositories

solidjs/solid

honojs/hono

unjs/nitro

State: closed

1"use client"23import { createSignal } from '@barefootjs/dom'4import {5  Collapsible,6  CollapsibleTrigger,7  CollapsibleContent,8} from '@/components/ui/collapsible'9import { Button } from '@/components/ui/button'10import { ChevronDownIcon } from '@/components/ui/icon'1112function CollapsibleControlled() {13  const [open, setOpen] = createSignal(false)1415  return (16    <div className="space-y-4">17      <Collapsible open={open()} onOpenChange={setOpen} class="space-y-2">18        <div className="flex items-center justify-between space-x-4">19          <h4 className="text-sm font-semibold">20            Starred Repositories21          </h4>22          <CollapsibleTrigger asChild>23            <Button variant="ghost" size="sm" className="w-9 p-0">24              <ChevronDownIcon size="sm" />25              <span className="sr-only">Toggle</span>26            </Button>27          </CollapsibleTrigger>28        </div>29        <div className="rounded-md border px-4 py-2 font-mono text-sm">30          solidjs/solid31        </div>32        <CollapsibleContent class="space-y-2">33          <div className="rounded-md border px-4 py-2 font-mono text-sm">34            honojs/hono35          </div>36          <div className="rounded-md border px-4 py-2 font-mono text-sm">37            unjs/nitro38          </div>39        </CollapsibleContent>40      </Collapsible>41      <p className="text-sm text-muted-foreground">42        State: {open() ? 'open' : 'closed'}43      </p>44    </div>45  )46}

#Disabled

Archived Repositories (disabled)

@barefootjs/legacy

@barefootjs/old-adapter

1"use client"23import {4  Collapsible,5  CollapsibleTrigger,6  CollapsibleContent,7} from '@/components/ui/collapsible'8import { Button } from '@/components/ui/button'9import { ChevronDownIcon } from '@/components/ui/icon'1011function CollapsibleDisabled() {12  return (13    <Collapsible disabled class="space-y-2">14      <div className="flex items-center justify-between space-x-4">15        <h4 className="text-sm font-semibold text-muted-foreground">16          Archived Repositories (disabled)17        </h4>18        <CollapsibleTrigger asChild>19          <Button variant="ghost" size="sm" className="w-9 p-0" disabled>20            <ChevronDownIcon size="sm" />21            <span className="sr-only">Toggle</span>22          </Button>23        </CollapsibleTrigger>24      </div>25      <div className="rounded-md border px-4 py-2 font-mono text-sm opacity-50">26        @barefootjs/legacy27      </div>28      <CollapsibleContent class="space-y-2">29        <div className="rounded-md border px-4 py-2 font-mono text-sm">30          @barefootjs/old-adapter31        </div>32      </CollapsibleContent>33    </Collapsible>34  )35}

#Accessibility

Activation - Enter/Space to toggle collapsible content
ARIA - Trigger uses aria-expanded; Content uses aria-labelledby
Disabled State - data-disabled on the collapsible, interaction is blocked
Screen Readers - State changes are announced when content is expanded/collapsed

#API Reference

Collapsible

Prop	Type	Default	Description
open	boolean	-	The controlled open state of the collapsible.
defaultOpen	boolean	false	The open state when initially rendered. Use when you do not need to control the open state.
onOpenChange	(open: boolean) => void	-	Event handler called when the open state changes.
disabled	boolean	false	When true, prevents the user from interacting with the collapsible.

CollapsibleTrigger

Prop	Type	Default	Description
asChild	boolean	false	Render child element as trigger instead of built-in button.

CollapsibleContent

Prop	Type	Default	Description