Skip to content

Zen

Zenv0.13.0
Storybook

Components

Accordion

Sections under headings that open one at a time, or several: questions and answers, or groups of settings.

Questions

At the day’s rate when you save the entry. The original amount and rate are kept with it, so the conversion never changes later.

Import

import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from '@rinzai/zen';

Examples

Multiple

multiple: each section opens and closes on its own.

API reference

<Accordion>

Sections under headings that open one at a time (or several, with multiple), e.g. questions and answers. Each AccordionItem is a Disclosure: an AccordionTrigger and an AccordionContent that grows open and folds shut. ↑↓ move between the headings, Home and End jump to the first and last.

PropTypeDefault
defaultValue
string | readonly string[] | null—
multiple

One section open at a time (the default); opening one closes the other. Any number open at once.

boolean—
onValueChange
((value: string | null) => void) | ((value: readonly string[]) => void)—
value

The open section's value, or null for none, when you keep it.

string | readonly string[] | null—

<AccordionItem>

One section: an AccordionTrigger and its AccordionContent.

PropTypeDefault
valueRequired

Names the section in the Accordion's value.

string—

<AccordionTrigger>

The heading and its button: your label, and a chevron that turns over while open.

PropTypeDefault
level

The heading level it sits in, to fit the page's outline. Default 3.

2 | 3 | 4 | 5 | 63

<AccordionContent>

What the trigger shows and hides; only in the page while open (or folding shut).

No props of its own; it accepts the props of the element it renders.