Demo
Usage
Import the Accordion and Accordion.Item components and styles.
What is an Accordion?
An Accordion contains all the parts of a collapsible section.
This is the item title
The `children` of the Accordion are displayed here.
import * as React from 'react';
import { Accordion } from '@aws-amplify/ui-react';
export const DefaultAccordionExample = () => {
return (
<Accordion.Container>
<Accordion.Item value="Accordion-item">
<Accordion.Trigger>
What is an Accordion?
<Accordion.Icon />
</Accordion.Trigger>
<Accordion.Content>
An Accordion contains all the parts of a collapsible section.
</Accordion.Content>
</Accordion.Item>
<Accordion.Item value="unique-value">
<Accordion.Trigger>
This is the item title
<Accordion.Icon />
</Accordion.Trigger>
<Accordion.Content>
The `children` of the Accordion are displayed here.
</Accordion.Content>
</Accordion.Item>
</Accordion.Container>
);
};
Single or multiple
The accordion by default only allows 1 item to be displayed at a time. To allow multiple items to be opened at a time, add the allowMultiple prop.
Click me first!
Now when you click the second item, this item will stay open until you close it.
Then click me!
Notice how both items can be open at the same time for the multiple Accordion.
import * as React from 'react';
import { Accordion } from '@aws-amplify/ui-react';
export const BasicMultipleAccordion = () => {
return (
<Accordion.Container allowMultiple>
<Accordion.Item value="item-1">
<Accordion.Trigger>
Click me first!
<Accordion.Icon />
</Accordion.Trigger>
<Accordion.Content>
Now when you click the second item, this item will stay open until you
close it.
</Accordion.Content>
</Accordion.Item>
<Accordion.Item value="item-2">
<Accordion.Trigger>
Then click me!
<Accordion.Icon />
</Accordion.Trigger>
<Accordion.Content>
Notice how both items can be open at the same time for the multiple
Accordion.
</Accordion.Content>
</Accordion.Item>
</Accordion.Container>
);
};
The default behavior allows opening a single item at once.
Click me first!
Now when you click the second item, this item will automatically collapse.
Then click me!
Notice how only one item can be open at a time for the single Accordion type.
import * as React from 'react';
import { Accordion } from '@aws-amplify/ui-react';
export const BasicSingleAccordion = () => {
return (
<Accordion.Container>
<Accordion.Item value="item-1">
<Accordion.Trigger>
Click me first!
<Accordion.Icon />
</Accordion.Trigger>
<Accordion.Content>
Now when you click the second item, this item will automatically
collapse.
</Accordion.Content>
</Accordion.Item>
<Accordion.Item value="item-2">
<Accordion.Trigger>
Then click me!
<Accordion.Icon />
</Accordion.Trigger>
<Accordion.Content>
Notice how only one item can be open at a time for the single
Accordion type.
</Accordion.Content>
</Accordion.Item>
</Accordion.Container>
);
};
Always open
To allow for the accordion to always have at least 1 item open, set the preventCollapse to true.
Can I collapse this item?
Only by opening the other item
What about the multiple Accordion?
Yes, you can set the preventCollapse prop along with allowMultiple
import * as React from 'react';
import { Accordion } from '@aws-amplify/ui-react';
export const AlwaysOpenAccordionExample = () => {
return (
<Accordion.Container preventCollapse defaultValue={['item-1']}>
<Accordion.Item value="item-1">
<Accordion.Trigger>
Can I collapse this item?
<Accordion.Icon />
</Accordion.Trigger>
<Accordion.Content>Only by opening the other item</Accordion.Content>
</Accordion.Item>
<Accordion.Item value="item-2">
<Accordion.Trigger>
What about the multiple Accordion?
<Accordion.Icon />
</Accordion.Trigger>
<Accordion.Content>
Yes, you can set the preventCollapse prop along with allowMultiple
</Accordion.Content>
</Accordion.Item>
</Accordion.Container>
);
};
Expanded by default
To expand specific items by default, pass a string[] of value(s) to the defaultValue prop. Each Accordion.Item should have a value string that lets the Accordion know which items are expanded.
Line 1
Haikus can be fun
Line 2
But sometimes they don‘t make sense...
Line 3
Refrigerator
import * as React from 'react';
import { Accordion } from '@aws-amplify/ui-react';
export const ExpandedByDefaultMultipleAccordion = () => {
return (
<Accordion.Container defaultValue={['line-1', 'line-2']}>
<Accordion.Item value="line-1">
<Accordion.Trigger>
Line 1
<Accordion.Icon />
</Accordion.Trigger>
<Accordion.Content>Haikus can be fun</Accordion.Content>
</Accordion.Item>
<Accordion.Item value="line-2">
<Accordion.Trigger>
Line 2
<Accordion.Icon />
</Accordion.Trigger>
<Accordion.Content>
But sometimes they don‘t make sense...
</Accordion.Content>
</Accordion.Item>
<Accordion.Item value="line-3">
<Accordion.Trigger>
Line 3
<Accordion.Icon />
</Accordion.Trigger>
<Accordion.Content>Refrigerator</Accordion.Content>
</Accordion.Item>
</Accordion.Container>
);
};
Controlled component
To use the Accordion as controlled component, specify the value of the item(s) to expand and use in conjunction with onChange.
What do you call a deer with no eyes?
No eye-deer.
What do you call a deer with no eyes or legs?
Still, no eye-deer.
import * as React from 'react';
import { Accordion } from '@aws-amplify/ui-react';
export const ControlledSingleAccordion = () => {
const [value, setValue] = React.useState([]);
return (
<Accordion.Container value={value} onValueChange={setValue}>
<Accordion.Item value="joke-1">
<Accordion.Trigger>
What do you call a deer with no eyes?
<Accordion.Icon />
</Accordion.Trigger>
<Accordion.Content>No eye-deer.</Accordion.Content>
</Accordion.Item>
<Accordion.Item value="joke-2">
<Accordion.Trigger>
What do you call a deer with no eyes or legs?
<Accordion.Icon />
</Accordion.Trigger>
<Accordion.Content>Still, no eye-deer.</Accordion.Content>
</Accordion.Item>
</Accordion.Container>
);
};
Custom title component
For more control over the layout or styling of the Accordion item header, pass a custom component to the <Accordion.Item> title prop.
CS 103Mathematical Foundations of Computing
CS 103
Mathematical Foundations of Computing
Example content for CS 103
CS 106AProgramming Methodology
CS 106A
Programming Methodology
Example content for CS 106A
import * as React from 'react';
import { Accordion, Flex, View } from '@aws-amplify/ui-react';
export const CustomTitle = ({ courseNumber, courseName }) => {
return (
<Flex gap="small">
<View width="xxl" color="teal.80">
{courseNumber}
</View>
<View>{courseName}</View>
</Flex>
);
};
export const CustomTitleComponent = () => {
return (
<Accordion.Container>
<Accordion.Item value="item-1">
<Accordion.Trigger>
<CustomTitle
courseNumber="CS 103"
courseName="Mathematical Foundations of Computing"
/>
<Accordion.Icon />
</Accordion.Trigger>
<Accordion.Content>Example content for CS 103</Accordion.Content>
</Accordion.Item>
<Accordion.Item value="item-2">
<Accordion.Trigger>
<CustomTitle
courseNumber="CS 106A"
courseName="Programming Methodology"
/>
<Accordion.Icon />
</Accordion.Trigger>
<Accordion.Content>Example content for CS 106A</Accordion.Content>
</Accordion.Item>
</Accordion.Container>
);
};
Styling
Theme
You can customize the appearance of all Accordion components in your application with a Theme.
Accordion Theme Source
Check out this themed Accordion
Pretty cool!
It is very customizable
I love it.
import { Accordion, ThemeProvider, createTheme } from '@aws-amplify/ui-react';
const theme = createTheme({
name: 'Accordion-theme',
tokens: {
components: {
accordion: {
backgroundColor: '{colors.blue.10}',
item: {
trigger: {
color: '{colors.blue.80}',
_hover: {
color: '{colors.blue.90}',
backgroundColor: '{colors.blue.20}',
},
},
content: {
color: '{colors.blue.80}',
},
},
},
},
},
});
export const AccordionThemeExample = () => (
<ThemeProvider theme={theme} colorMode="light">
<Accordion.Container>
<Accordion.Item value="item1">
<Accordion.Trigger>
Check out this themed Accordion
<Accordion.Icon />
</Accordion.Trigger>
<Accordion.Content>Pretty cool!</Accordion.Content>
</Accordion.Item>
<Accordion.Item value="item2">
<Accordion.Trigger>
It is very customizable
<Accordion.Icon />
</Accordion.Trigger>
<Accordion.Content>I love it.</Accordion.Content>
</Accordion.Item>
</Accordion.Container>
</ThemeProvider>
);
Target classes
| Class | Description |
|---|---|
amplify-accordion | Top level element that wraps the Accordion primitive |
amplify-accordion__item | Accordion item (containier for header, trigger, and content) |
amplify-accordion__item__content | Accordion content container |
amplify-accordion__item__icon | Icon to indicate whether an item is expanded or collapsed |
amplify-accordion__item__trigger | Accordion item trigger (summary element) |
--amplify-components-accordion-background-color--amplify-components-accordion-item-border-color--amplify-components-accordion-item-border-radius--amplify-components-accordion-item-border-style--amplify-components-accordion-item-border-width--amplify-components-accordion-item-content-color--amplify-components-accordion-item-content-padding-block-end--amplify-components-accordion-item-content-padding-block-start--amplify-components-accordion-item-content-padding-inline--amplify-components-accordion-item-icon-color--amplify-components-accordion-item-icon-transition-duration--amplify-components-accordion-item-icon-transition-timing-function--amplify-components-accordion-item-trigger-align-items--amplify-components-accordion-item-trigger-background-color--amplify-components-accordion-item-trigger-color--amplify-components-accordion-item-trigger-focus-border-color--amplify-components-accordion-item-trigger-focus-box-shadow--amplify-components-accordion-item-trigger-gap--amplify-components-accordion-item-trigger-hover-background-color--amplify-components-accordion-item-trigger-hover-color--amplify-components-accordion-item-trigger-justify-content--amplify-components-accordion-item-trigger-padding-block--amplify-components-accordion-item-trigger-padding-inline
Global styling
To override styling on all Accordions, you can set the Amplify CSS variables with the built-in classes.
/* styles.css */
.amplify-accordion {
--amplify-components-accordion-background-color: var(--amplify-colors-primary-80);
}
Click me first!
Now when you click the second item, this item will automatically collapse.
Then click me!
Notice how only one item can be open at a time for the single Accordion type.
Local styling
To override styling on a specific Accordion, you can use (in order of increasing specificity): a class selector and style props.
Using a class selector:
/* styles.css */
.my-accordion {
background-color: var(--amplify-colors-primary-80);
color: var(--amplify-colors-white);
}
.amplify-accordion__item__body {
color: var(--amplify-colors-white);
}
Section 1 title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Section 2 title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Section 3 title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
import * as React from 'react';
import { Accordion } from '@aws-amplify/ui-react';
const accordionItems = [
{
title: 'Section 1 title',
value: 'item-1',
content:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
},
{
title: 'Section 2 title',
value: 'item-2',
content:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
},
{
title: 'Section 3 title',
value: 'item-3',
content:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
},
];
export const ClassStylingAccordion = () => {
return (
<Accordion.Container className="my-accordion">
{accordionItems.map(({ title, value, content }) => (
<Accordion.Item value={value} key={value}>
<Accordion.Trigger>
{title}
<Accordion.Icon />
</Accordion.Trigger>
<Accordion.Content>{content}</Accordion.Content>
</Accordion.Item>
))}
</Accordion.Container>
);
};
Using style props:
Section 1 title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Section 2 title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Section 3 title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
import * as React from 'react';
import { Accordion } from '@aws-amplify/ui-react';
export const StylePropsAccordion = () => {
return (
<Accordion.Container backgroundColor="secondary.80" color="font.inverse">
<Accordion.Item value="item-1">
<Accordion.Trigger>
Section 1 title
<Accordion.Icon />
</Accordion.Trigger>
<Accordion.Content>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</Accordion.Content>
</Accordion.Item>
<Accordion.Item value="item-2">
<Accordion.Trigger>
Section 2 title
<Accordion.Icon />
</Accordion.Trigger>
<Accordion.Content>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</Accordion.Content>
</Accordion.Item>
<Accordion.Item value="item-3">
<Accordion.Trigger>
Section 3 title
<Accordion.Icon />
</Accordion.Trigger>
<Accordion.Content>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.
</Accordion.Content>
</Accordion.Item>
</Accordion.Container>
);
};