Collapsible

A single section that shows and hides its content.

CollapsibleProps packages/core/src/extra-controls.ts:566 ↗

Import

import { Collapsible } from "@tarve/core";

Usage

Collapsible.tsx

import { Collapsible, Text } from "@tarve/core";

let open = false;

<Collapsible
  open={open}
  trigger={<Text weight={600}>Advanced options</Text>}
  onOpenChange={(next) => {
    open = next;
  }}
>
  <Text>Hidden until expanded.</Text>
</Collapsible>

Props

Prop	Type	Default
`open` required	`boolean`	—
`trigger` required	`Child`	—
`disabled`	`boolean`	—
`label`	`string`	`"Toggle section"`
`onOpenChange`	`(open: boolean) => void`	—

Common props

Shared by every component. See descriptions →

childrenhighlightidkeymotionFromonHighlightonPasteonTransitionEndrovingGroupstyle