Components

Collapsible

Show and hide a single section. Simpler than Accordion — reach for it when you have exactly one block to toggle.

When to usewhen there is exactly one section to reveal — advanced options, an expanded row detail, a nested tree branch.

Import

import {
  Collapsible,
  CollapsibleTrigger,
  CollapsibleContent,
} from "@ravnhq/efni/collapsible"

Basic

Timeouts, retry policies, and operator escalation preferences live here. Rarely needed for standard missions.

const [open, setOpen] = useState(true)

<Collapsible open={open} onOpenChange={setOpen}>
  <CollapsibleTrigger className={buttonVariants({ variant: "outline", size: "sm" })}>
    Advanced options
    <Icon icon={ChevronDown} className={open ? "rotate-180" : ""} />
  </CollapsibleTrigger>
  <CollapsibleContent>
    Timeouts, retry policies…
  </CollapsibleContent>
</Collapsible>

Accessibility

Key	Action
`Enter / Space`	Toggle the collapsible content.
`Tab`	Move focus to and from the trigger.

The trigger renders as a native <button> with aria-expanded and aria-controls wired to the content region.
Style the trigger with buttonVariants() className — do not wrap Button inside; you'll end up with two nested <button>s.

Props

Prop	Type	Default	Description
`open`	`boolean`	—	Whether the collapsible panel is currently open. To render an uncontrolled collapsible, use the `defaultOpen` prop instead.
`defaultOpen`	`boolean`	`false`	Whether the collapsible panel is initially open. To render a controlled collapsible, use the `open` prop instead.
`onOpenChange`	`((open: boolean, eventDetails: CollapsibleRootChangeEventDetails) => void)`	—	Event handler called when the panel is opened or closed.
`disabled`	`boolean`	`false`	Whether the component should ignore user interaction.
`…props`	`CollapsiblePrimitive.Root.Props`	—	Everything Collapsible passes to the element it renders.