Accordion
Groups similar content and shows or hides it depending on user needs.
import { Accordion } from '@balance-web/accordion';Primitives
This package exposes a number of primitives that can be used to compose accordion.
Accordion
Renders the root of an accordion.
Basic usage
All accordion primitives must be used as children of this component.
<Accordion>{ /* accordion primitives */}<Accordion>type
Has 2 possible values:
single
Only 1 item can be open at a time. Opening an item closes the currently open item.
<Accordion type="single"><Accordion>multiple
Multiple items can be open at the same time.
<Accordion type="single"><Accordion>defaultValue
Set an item to be open by default.
<Accordion defaultValue="unique-item-value-3"><Accordion>This prop is only effectual in uncontrolled mode.
Controlled vs uncontrolled
By default, the Accordion is uncontrolled which means users can toggle items without the value being set manually.
The value and onValueChange props can be used to gain full control of the component.
Note: The type of
valueandonValueChangechange based on the value of thetypeprop.
/** When type=single */
const [value, setValue] = useState("unique-item-value-3")
<Accordion value={value} onValueChange={(value) => setValue(value)}></Accordion>
/** When type=multiple */
const [values, setValues] = useState(["unique-item-value-3"])
<Accordion value={values} onValueChange={(value) => setValue(values)}></Accordion>Accordion.Item
Renders a single item.
Basic usage
Can only be used inside Accordion.
<Accordion.Item>{ /** accordion item primitives */}<Accordion.Item>value
A unique value for the item that's used to toggle its open/closed state. This value is what the defaultValue, value and onValueChange props in Accordion refer to.
<Accordion.Item value="item-1"><Accordion.Item>
<Accordion.Item value="item-2"><Accordion.Item>
<Accordion.Item value="item-3"><Accordion.Item>Accordion.ItemHeader
Renders the header for an item that also serves as a trigger for open/close.
Basic usage
Can only be used inside an Accordion.Item.
Children are rendered in a flex:row container.
<Accordion.ItemHeader>
<Heading level="6" align="start">
Heading
</Heading>
</Accordion.ItemHeader>Accordion.ItemContent
Renders the collapsible content for an item.
Basic usage
Can only be used inside an Accordion.Item.
<Accordion.ItemContent>Content</Accordion.ItemContent>