Navigation

Accordion

A vertically stacked set of sections that can be expanded and collapsed.

AccordionView source

Example

The preview is interactive. The code below it is the docs demo source; demo-only layout classes can be omitted in application code.

A Retend-native component library with shared design tokens.

tsx

import { Cell } from "retend";

import { Accordion, Button } from "innate-ui";
import classes from "../docs.module.css";

export function AccordionDemo() {
  const value = Cell.source<"first" | "second" | "third" | null>("first");
  return (
    <div class={classes.accordionDemo}>
      <Accordion
        id="accordion-demo"
        type="single"
        collapsible
        value={value}
        onChange={(next) => value.set(next)}
      >
        <Accordion.Item value="first">
          <Accordion.Header>
            <Accordion.Trigger>
              <Button variant="ghost">
                What is innate-ui?
                <Accordion.Indicator />
              </Button>
            </Accordion.Trigger>
          </Accordion.Header>
          <Accordion.Content>
            A Retend-native component library with shared design tokens.
          </Accordion.Content>
        </Accordion.Item>
        <Accordion.Item value="second">
          <Accordion.Header>
            <Accordion.Trigger>
              <Button variant="ghost">
                Does it support themes?
                <Accordion.Indicator />
              </Button>
            </Accordion.Trigger>
          </Accordion.Header>
          <Accordion.Content>
            Yes — light and dark themes are first-class rendering targets.
          </Accordion.Content>
        </Accordion.Item>
        <Accordion.Item value="third" disabled>
          <Accordion.Header>
            <Accordion.Trigger>
              <Button variant="ghost" disabled>
                Disabled item
                <Accordion.Indicator />
              </Button>
            </Accordion.Trigger>
          </Accordion.Header>
          <Accordion.Content>This item cannot be opened.</Accordion.Content>
        </Accordion.Item>
      </Accordion>
    </div>
  );
}

API reference

This table is generated from Innate UI's exported TypeScript declarations and JSDoc. Native element attributes inherited by a prop type are not repeated here.

AccordionProps

Prop	Type	Default
`id`required Stable id used to connect each trigger with its content panel.	`string`	`—`
`children`required Accordion items rendered inside the root.	`JSX.Children`	`—`
`type` Selection mode inferred from the value shape.	`JSX.ValueOrCell<AccordionTypeFor<Value>>`	`"single"`
`value` Currently expanded item value, or values in multiple mode.	`JSX.ValueOrCell<Value>`	`—`
`collapsible` Whether the open item may be collapsed in single mode.	`JSX.ValueOrCell<boolean>`	`false`
`onChange` Called when the expanded value changes.	`(value: Value) => void`	`—`
`onKeyDown` Key-down handler called before the accordion's keyboard navigation.	`EventHandlerProp<HTMLDivElement, KeyboardEvent>`	`—`

Inspect the typed source →