## Feature Examples
### Vertical padding
- description: Control vertical padding of accordion items with size prop:
large is a larger size that emphasizes a few items.medium (default) is a standard size for common cases.small and tiny are compact sizes that display more items in a smaller space.
Note that size prop only controls the padding of accordion items (and not their inner content).
- example:
```jsx
Item content
),
}),
accordionItemBuilder({
title: 'Large',
children: (
Item content
),
}),
]}
/>
Item content
),
}),
accordionItemBuilder({
title: 'Medium',
children: (
Item content
),
}),
]}
/>
Item content
),
}),
accordionItemBuilder({
title: 'Small',
children: (
Item content
),
}),
]}
/>
Item content
),
}),
accordionItemBuilder({
title: 'Tiny',
children: (
Item content
),
}),
]}
/>
;
```
### Horizontal padding
- description: Control horizontal padding of accordion items and their inner content with horizontalPadding prop:
large (default) is a standard size for common cases.medium is a more compact size.small and tiny are the most compact sizes used to display more content in narrow spaces.none has no horizontal padding.
Item content
),
}),
accordionItemBuilder({
title: 'Large',
children: (
Item content
),
}),
]}
/>
Item content
),
}),
accordionItemBuilder({
title: 'Medium',
children: (
Item content
),
}),
]}
/>
Item content
),
}),
accordionItemBuilder({
title: 'Small',
children: (
Item content
),
}),
]}
/>
Item content
),
}),
accordionItemBuilder({
title: 'Tiny',
children: (
Item content
),
}),
]}
/>
Item content
),
}),
accordionItemBuilder({
title: 'None',
children: (
Item content
),
}),
]}
/>
;
```
### Skin
- description: Control the appearance of the accordion with skin prop:
standard (default) is used to visually separate accordion items from their inner content.light is used when both items and their inner content need to be white.neutral is used to emphasize accordion items over their inner content.
Item content
),
}),
accordionItemBuilder({
title: 'Standard',
children: (
Item content
),
}),
]}
/>
Item content
),
}),
accordionItemBuilder({
title: 'Light',
children: (
Item content
),
}),
]}
/>
Item content
),
}),
accordionItemBuilder({
title: 'Neutral',
children: (
Item content
),
}),
]}
/>
;
```
### Shadow
- description: Hide the inner content shadow with hideShadow prop.
- example:
```jsx
Item content
),
}),
accordionItemBuilder({
title: 'With shadow',
children: (
Item content
),
}),
]}
/>
Item content
),
}),
accordionItemBuilder({
title: 'No shadow',
children: (
Item content
),
}),
]}
/>
;
```
### Title and subtitle
- description: Describe accordion items using title and subtitle props.
These containers also accept any component or a composition of multiple elements.
- example:
```jsx
Item content
),
}),
accordionItemBuilder({
title: 'Title',
subtitle: (
Subtitle
Learn More
),
children: (
Item content
),
}),
accordionItemBuilder({
title:
Item content
),
}),
]}
/>
;
```
### Prefix icon
- description: Add a prefix icon in front of an accordion item with icon prop.
- example:
```jsx
Item content
),
}),
accordionItemBuilder({
title: 'With icon',
icon:
Item content
),
}),
]}
/>
;
```
### Sections
- description: Organize accordion items into groups using accordionSectionItemBuilder.
- example:
```jsx
Item content
),
}),
accordionItemBuilder({
title: 'Second item',
children: (
Item content
),
}),
accordionSectionItemBuilder({
title: 'Section B',
}),
accordionItemBuilder({
title: 'Third item',
children: (
Item content
),
}),
accordionItemBuilder({
title: 'Fourth item',
children: (
Item content
),
}),
]}
/>;
```
### Show/hide button
- description: Define the show/hide action at the end of accordion item with buttonType prop. It can be:
Default chevron icon. textButton.button.or a custom control (node).
Provide the labels for these actions, such as 'Show' and 'Hide' with expandLabel and collapseLabel props.
- example:
```jsx
Item content
),
}),
accordionItemBuilder({
title: 'Default',
children: (
Item content
),
}),
]}
/>
Item content
),
}),
accordionItemBuilder({
title: 'Text button',
showLabel: 'always',
buttonType: 'textButton',
expandLabel: 'Show',
collapseLabel: 'Hide',
children: (
Item content
),
}),
]}
/>
Item content
),
}),
accordionItemBuilder({
title: 'Button',
buttonType: 'button',
expandLabel: 'Show',
collapseLabel: 'Hide',
children: (
Item content
),
}),
]}
/>
),
children: (
Item content
),
}),
accordionItemBuilder({
title: 'Custom control',
buttonType: 'node',
showLabel: 'always',
expandLabel: (
),
collapseLabel: (
),
children: (
Item content
),
}),
]}
/>
;
```
### Initially open
- description: By default, all accordion items are closed until expanded by the user.
Open one or multiple accordion items from the start with initiallyOpen prop.
- example:
```jsx
Item content
),
}),
accordionItemBuilder({
title: 'Initially open',
initiallyOpen: 'true',
children: (
Item content
),
}),
]}
/>
;
```
### Open multiple items
- description: By default, only one accordion item can be open at a time.
Allow opening multiple items at once with multiple prop.
- example:
```jsx
Item content
),
}),
accordionItemBuilder({
title: 'Default',
children: (
Item content
),
}),
]}
/>
Item content
),
}),
accordionItemBuilder({
title: 'Multiple items open',
children: (
Item content
),
}),
]}
/>
;
```
### Disabled item
- description: Disable an accordion item with disabled prop.
Users will not be able to expand or collapse it.
- example:
```jsx
Item content
),
}),
accordionItemBuilder({
title: 'Disabled',
disabled: true,
children: (
Item content
),
}),
accordionItemBuilder({
title: 'Disabled open',
disabled: true,
initiallyOpen: true,
children: (
Item content
),
}),
]}
/>;
```
## Developer Examples
### Using item builders
- description: Accordion is composed from a list of items that share expand/collapse feature. To create them in the most efficient way, use accordionItemBuilder.
Note: presenting accordion items as plain objects is still available as a legacy pattern, but it shouldn't be used in any new projects.
- example:
```jsx
Item content
),
}),
accordionItemBuilder({
title: 'Second item',
children: (
Item content
),
}),
]}
/>;
```
### Controlled
- description: Component can be used in controlled mode by passing open and onToggle props to accordionItemBuilder.
- example:
```jsx
() => {
const [isOpen, setIsOpen] = React.useState(false);
return (
setIsOpen(!isOpen),
open: isOpen,
children: (
Item content
),
}),
]}
/>
);
};
```
## Common Use Case Examples
### In a side panel
- description: Accordion in a side panel allows for efficient use of space.
Allow to open only one accordion item at a time. This will minimise the cognitive load and scrolling required by the user.
- example:
```jsx
() => {
const checkboxes = [
{
id: '1',
label: '2023 Winter',
initialState: true,
},
{
id: '2',
label: '2023 Spring',
initialState: true,
},
{
id: '3',
label: '2022 Winter',
initialState: false,
},
{
id: '4',
label: '2022 Spring',
initialState: false,
},
];
const [checkboxesList, setCheckboxesList] = React.useState(checkboxes);
const isAllSelected = checkboxesList.every((item) => item.isChecked);
const isAllDeselected = checkboxesList.every((item) => !item.isChecked);
const toggleCheckedAll = (checked) => {
const updatedCheckboxes = checkboxesList.map((item) => ({
...item,
isChecked: checked,
}));
setCheckboxesList(updatedCheckboxes);
};
const toggleCheckbox = (id) => {
const updatedCheckboxes = checkboxesList.map((item) =>
item.id === id ? { ...item, isChecked: !item.isChecked } : item,
);
setCheckboxesList(updatedCheckboxes);
};
const renderCheckboxes = () =>
checkboxesList.map((item) => (
toggleCheckbox(item.id)}
>
{item.label}
));
const [selected, setSelected] = React.useState(1);
const [value, setValue] = React.useState({ min: 1, max: 3 });
const marks = {
0: '$0',
1: '$50',
2: '$100',
3: '$150',
4: '$200',
};
return (
{}}>
toggleCheckedAll(!isAllSelected)}
>
All collections
{renderCheckboxes()}
),
}),
accordionItemBuilder({
title: 'Inventory',
children: (
All products
In stock
Out of stock
),
}),
accordionItemBuilder({
title: 'Price',
children: (
setValue({ min: val[0], max: val[1] })}
marks={marks}
min={0}
max={4}
step={1}
value={[value.min, value.max]}
/>
),
}),
]}
/>
Apply
);
};
```
### In FAQs
- description: Use accordion in FAQs or similar content-heavy sections. It improves scanning and navigation across related content sections.
- example:
```jsx
What are Core Web Vitals?
),
children: (
Core Web Vitals are three performance factors Google takes
into account for SEO ranking: Largest Contentful Paint,
Cumulative Layout Shift, and First Input Delay. When measured
in a lab, they don’t affect your SEO directly.
),
}),
accordionItemBuilder({
title: (
Why are my scores different for desktop and mobile?
),
children: (
PageSpeed scores for mobile are often lower than for desktop.
That’s because mobile devices have slower processors and take
more time to resize texts and images. Lab settings are another
reason: Google’s mobile test is on a simulated 3G connection,
which is different from the 4G and Wifi connections most
visitors use to access your site.
),
}),
accordionItemBuilder({
title: (
Why is Google’s simulation different from real visitor
experience?
),
children: (
The measurements above are based on the experience of people who
have actually visited your site over the last 30 day period.
What Google does is check your site’s average metrics in lab
conditions, using a very basic network and device. This means
Google’s estimate is probably different from what your actual
site visitors experience.
),
}),
accordionItemBuilder({
title: (
Why does my score change from one test to another?
),
children: (
This can be due to a number of factors, including local
networks and CPU load at the time of the test, as well as
changes to your site's home page. In most cases, changes to
the score are minimal.
),
}),
accordionItemBuilder({
title: (
Does my PageSpeed score affect my SEO ranking?
),
children: (
Not exactly. Even though site speed is one of the many factors
affecting your SEO ranking, only data collected from real user
sessions counts. The PageSpeed score you see here is based on
a lab test and doesn’t affect your site’s SEO directly.
),
}),
]}
/>
|
;
```