The accordion component is composed of four parts: Root, Item, Trigger, and Content. This component expands the Radix Accordion component.
import {
Accordion,
ACCORDION_DENSITY,
ACCORDION_TYPE,
} from "@washingtonpost/wpds-ui-kit";
const Component = () => {
const myLoader = ({ src }) => {
return `${src}`;
};
return (
<Accordion.Root type={ACCORDION_TYPE.single} defaultValue="item-1">
<Accordion.Item value="item-1">
<Accordion.Trigger
density={ACCORDION_DENSITY.compact}
ref={myHeaderRef}
>
This is a header
</Accordion.Trigger>
<Accordion.Content ref={myContentRef}>
This the text that can either be expanded or hidden.
</Accordion.Content>
</Accordion.Item>
<Accordion.Item value="item-2">
<Accordion.Trigger
density={ACCORDION_DENSITY.compact}
ref={myHeaderRef}
>
This is another header. This item has an image.
</Accordion.Trigger>
<Accordion.Content {...args} ref={myContentRef}>
<Image
loader={myLoader}
src="https://i.pravatar.cc/300/300"
width="100"
height="100"
layout="fixed"
alt="You can have anything as a child, including an image!"
/>
</Accordion.Content>
</Accordion.Item>
</Accordion.Root>
);
};
This is the main wrapper for the accordion component. This is where most of the props get passed. The different types can be found inside the ACCORDION_TYPE enum.
export enum ACCORDION_TYPE {
single = "single",
multiple = "multiple",
}
Name | Description | Type | Required |
---|---|---|---|
type | Dictates whether you can have multiple accordion items open at the same time or not. This also affects the TS types of some of other props. | enum | true |
disabled | Whether the accordion is disabled or not | bool | false |
defaultValue | Item(s) that should be expanded from the start. Should match the values assigned to each Accordion.Item . |
string | string[] | false |
Each Accordion.Item should contain an Accordion.Trigger
and an Accordion.Content
. Each item should also have a value which will function as a key that you can use to set the defaultValue
.
Name | Description | Type | Required |
---|---|---|---|
value | A unique value for the item. | string | true |
disabled | Whether the accordion is disabled or not | bool | false |
asChild | Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node. | bool | false |
Toggles the collapsed state of its associated item. There are different density options that affect the padding inside the ACCORDION_DENSITY enum.
export enum ACCORDION_DENSITY {
compact = "compact",
loose = "loose",
default = "default",
}
Name | Description | Type | Required |
---|---|---|---|
density | Applies a certain amount of padding to the accordion trigger/header | enum | false |
ref | A standard React ref | ref | false |
asChild | Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node. | bool | false |
Contains the collapsible content for an item. The Accordion.Content can hold anything, from text to images to other components.
Name | Description | Type | Required |
---|---|---|---|
ref | A standard React reference | ref | false |
asChild | Change the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node. | bool | false |
forceMount | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. | bool | false |