Accordion

Vertically stacked sections that expand one at a time.

AccordionProps packages/core/src/controls.ts:177 ↗

Import

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

Usage

Accordion.tsx

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

let open: string | undefined = "renderers";

<Accordion
  value={open}
  items={[
    { value: "renderers", title: "Which renderers are there?", content: <Text>D3D11, Vello/WGPU and a CPU path.</Text> },
    { value: "platforms", title: "Which platforms?", content: <Text>Windows x64 and Linux x64.</Text> },
  ]}
  onValueChange={(value) => {
    open = value;
  }}
/>

Props

Prop	Type	Default
`items` required	`AccordionItem[]`	—
`onValueChange`	`(value: string \| undefined) => void`	—
`value`	`string`	—

Common props

Shared by every component. See descriptions →

childrenhighlightidkeymotionFromonHighlightonPasteonTransitionEndrovingGroupstyle

Types

AccordionItem

interface AccordionItem { value: string; title: string; content: Child; disabled?: boolean }