Collapsible

At a glance

• Single-item disclosure — for multi-item FAQ lists use Accordion.
• Compound API: Collapsible.Trigger + Collapsible.Content.
• Trigger wires aria-expanded and aria-controls automatically.
• Web: Content animates via CSS max-height transition (200 ms).
• Native: Content mounts/unmounts immediately (animated height is a v2 follow-up).

Preview

Usage

import { Collapsible } from '@nori-ui/core';
 
// Uncontrolled (starts closed)
<Collapsible>
  <Collapsible.Trigger>Show details</Collapsible.Trigger>
  <Collapsible.Content>
    <Text>Hidden until the trigger is pressed.</Text>
  </Collapsible.Content>
</Collapsible>
 
// Uncontrolled (starts open)
<Collapsible defaultOpen>
  <Collapsible.Trigger>Hide details</Collapsible.Trigger>
  <Collapsible.Content>...</Collapsible.Content>
</Collapsible>
 
// Controlled
<Collapsible open={open} onOpenChange={setOpen}>
  <Collapsible.Trigger>Toggle</Collapsible.Trigger>
  <Collapsible.Content>...</Collapsible.Content>
</Collapsible>

Props

Collapsible

Accepts open (controlled) and onOpenChange for parent-driven state. Use defaultOpen={true} for uncontrolled mode starting in the open position.

Collapsible.Trigger

The button that toggles the panel. Accepts children (the visible label/icon) and an optional asChild to render a custom element instead of the default Pressable. Wires aria-expanded and aria-controls onto the trigger element automatically.

Collapsible.Content

The panel that expands and collapses. Accepts children (the revealed content) and an optional className for layout styles. On web the panel animates via a CSS max-height transition (200 ms). On native, the panel mounts/unmounts without animation in v1 — animated height is a v2 follow-up.