Collapsible

A section that can be collapsed and expanded.

Anatomy

<Collapsible>
  <CollapsibleTrigger />
  <CollapsibleContent />
</Collapsible>

Usage

Import <Collapsible>, <CollapsibleTrigger>, and <CollapsibleContent> and compose them together.

import { Button } from "stylus-ui/Button";
import { Card } from "stylus-ui/Card";
import {
  Collapsible,
  CollapsibleTrigger,
  CollapsibleContent,
} from "stylus-ui/Collapsible";
import { faAnglesUpDown } from "@fortawesome/pro-regular-svg-icons";

export default () => (
  <Collapsible className="flex flex-col items-center gap-2">
    <CollapsibleTrigger asChild>
      <Button
        variant="secondary"
        icon={faAnglesUpDown}
        screenReaderLabel="Toggle"
      />
    </CollapsibleTrigger>
    <CollapsibleContent>
      <Card>Peekaboo</Card>
    </CollapsibleContent>
  </Collapsible>
);

API Reference

`Collapsible`

Inherits properties from HTMLElement.

Prop	Type	Default
`asChild`	`boolean`	`false`
`defaultOpen`	`boolean`
`disabled`	`boolean`
`onOpenChange`	`(open: boolean) => void`
`open`	`boolean`

`CollapsibleTrigger`

Inherits properties from HTMLButtonElement.

Prop	Type	Default
`asChild`	`boolean`	`false`

`CollapsibleContent`

Inherits properties from HTMLElement.

Prop	Type	Default
`asChild`	`boolean`	`false`
`forceMount`	`boolean`