Accordion

Accordion displays vertically stacked sections that can be expanded and collapsed. By default it fills the available height of its parent; set autoSize to size it to its content instead.

Basic usage

Collapsible behavior

Opening an item closes the previously open item. By default, activating the open item does nothing. Set collapsible to allow it to close.

<Accordion defaultValue="first" collapsible>
    {/* items */}
</Accordion>

Multiple open items

Set multiple to let several items be open at once. Activating an item toggles only that item. In this mode defaultValue and value are string[], and onValueChange receives the complete next array of open values, in item order. collapsible is ignored, because any item can always be closed.

<Accordion multiple defaultValue={["overview", "features"]}>
    {/* items */}
</Accordion>

Pass multiple as a literal true (as above, or multiple={true}) so the types narrow to AccordionMultipleProps.

Sizing to content

By default the accordion fills 100% of its parent's width and height. Set autoSize to keep the full width but make the height follow the items instead. The accordion then grows and shrinks as items open and close, following the open/close animation.

<Accordion autoSize defaultValue="overview">
    {/* items */}
</Accordion>

Keeping content mounted

By default an item's content is unmounted once its closing animation completes, so any state inside it is lost. Set keepMounted to keep every item's content mounted from the first render. Closed content is collapsed to zero height and hidden, so it cannot be seen, clicked, or selected with a gamepad, but its component state survives closing and reopening.

<Accordion keepMounted collapsible defaultValue="settings">
    {/* items */}
</Accordion>

Independent, content-sized sections

Combine autoSize, multiple, and keepMounted for a stack of independent sections, such as a settings panel, where each section opens on its own, the accordion takes only the height it needs, and inputs keep their values while their section is closed.

import React from "@rbxts/react";
import { Accordion, Container, Input, Text } from "@rbxts/react-clean-ui";

export function SettingsSectionsExample() {
    return (
        <Container width="75%">
            <Accordion autoSize multiple keepMounted defaultValue={["profile"]}>
                <Accordion.Item value="profile">
                    <Accordion.Header text="Profile" />
                    <Accordion.Content>
                        <Input placeholder="Display name" />
                    </Accordion.Content>
                </Accordion.Item>
                <Accordion.Item value="audio">
                    <Accordion.Header text="Audio" />
                    <Accordion.Content>
                        <Text text="Volume and sound settings." />
                    </Accordion.Content>
                </Accordion.Item>
            </Accordion>
        </Container>
    );
}

Accordion

The props type is AccordionProps in single mode (multiple omitted or false) and AccordionMultipleProps when multiple is true.

Child components

• Accordion.Item requires a unique value and accepts disabled.
• Accordion.Header is the activation target and accepts an optional icon and text. When text is provided, it renders a <Text> component automatically; otherwise children are used.
• Accordion.Content is mounted while its item is expanded and unmounted after closing, unless keepMounted is set. It accepts an optional text prop that renders a <Text> component when provided; otherwise children are used.

Only direct Accordion.Item children are used. Within each item, the first direct header and content are used; an item without a header is omitted.

Controlled usage

Supplying value makes the accordion controlled. Interactions call onValueChange, while the visible state changes only after the supplied value changes.

const [value, setValue] = React.useState<string>();

<Accordion value={value} onValueChange={setValue} collapsible>
    {/* items */}
</Accordion>

In multiple mode, the controlled value is an array.

const [open, setOpen] = React.useState<string[]>([]);

<Accordion multiple value={open} onValueChange={setOpen}>
    {/* items */}
</Accordion>