Accordion

Last updated: 2.0.0 (19/01/2024)

Usage

import { Accordion, useControlledList } from "@valence-ui/core";

function MyComponent() { 
    const openedItems = useControlledList(["item1"]);

    return ( 
        <Accordion
            itemList={openedItems}
        >
            <Accordion.Item
                key="item1"
                value="item1"
                control={
                    <Accordion.Control
                        title="Item 1"
                    />
                }
            >
                <Accordion.Panel>
                    // Accordion child contents...
                </Accordion.Panel>
            </Accordion.Item>
            
            // Additional accordion items...
        </Accordion>
    )
}

All items passed into the useControlledList() hook will determine which items are initially "opened". You can supply as few or as many items to this list as you'd like.

Props

AccordionProps

Extends FlexProps.

Property	Type	Description
itemList (required)	ControlledList<string>	The list of items associated with this accordion.
children (required)	ReactNode[]

AccordionItemProps

Extends FlexProps.

Property	Type	Description
value (required)	string	The value of this accordion item.
control (required)	ReactNode	The control to display for this item.
flexProps	FlexProps	Props to apply to the Flex element surrounding the children.

AccordionControlProps

Extends FlexProps.

Property	Type	Description
title (required)	string	The title to display in the control.
chevronIcon	ReactNode	The icon to display in the control.
titleProps	TitleProps	Optional props to pass to the title.
opened	boolean	Whether the control is opened

AccordionPanelProps

Extends FlexProps.

No unique props.