Integer tincidunt. Etiam sit amet orci eget eros faucibus tincidunt.
Integer tincidunt. Etiam sit amet orci eget eros faucibus tincidunt.
Integer tincidunt. Etiam sit amet orci eget eros faucibus tincidunt.
Integer tincidunt. Etiam sit amet orci eget eros faucibus tincidunt.
Integer tincidunt. Etiam sit amet orci eget eros faucibus tincidunt.
Integer tincidunt. Etiam sit amet orci eget eros faucibus tincidunt.
Code
1<Accordion>
2<AccordionItemlabel="Accordion Item 1">
3<ContentStack>
4<p>Integer tincidunt. Etiam sit amet orci eget eros faucibus tincidunt.</p>
5<p>Integer tincidunt. Etiam sit amet orci eget eros faucibus tincidunt.</p>
6</ContentStack>
7</AccordionItem>
8<AccordionItemlabel="Accordion Item 2">
9<ContentStack>
10<p>Integer tincidunt. Etiam sit amet orci eget eros faucibus tincidunt.</p>
11<p>Integer tincidunt. Etiam sit amet orci eget eros faucibus tincidunt.</p>
12</ContentStack>
13</AccordionItem>
14<AccordionItemlabel="Accordion Item 3">
15<ContentStack>
16<p>Integer tincidunt. Etiam sit amet orci eget eros faucibus tincidunt.</p>
17<p>Integer tincidunt. Etiam sit amet orci eget eros faucibus tincidunt.</p>
18</ContentStack>
19</AccordionItem>
20</Accordion>
Maximum width set
Integer tincidunt. Etiam sit amet orci eget eros faucibus tincidunt.
Integer tincidunt. Etiam sit amet orci eget eros faucibus tincidunt.
Integer tincidunt. Etiam sit amet orci eget eros faucibus tincidunt.
Integer tincidunt. Etiam sit amet orci eget eros faucibus tincidunt.
Integer tincidunt. Etiam sit amet orci eget eros faucibus tincidunt.
Integer tincidunt. Etiam sit amet orci eget eros faucibus tincidunt.
Code
1<AccordionmaxWidth="60%">
2 ...
3</Accordion>
Accordion item open by default
Integer tincidunt. Etiam sit amet orci eget eros faucibus tincidunt.
Integer tincidunt. Etiam sit amet orci eget eros faucibus tincidunt.
Integer tincidunt. Etiam sit amet orci eget eros faucibus tincidunt.
Integer tincidunt. Etiam sit amet orci eget eros faucibus tincidunt.
Integer tincidunt. Etiam sit amet orci eget eros faucibus tincidunt.
Integer tincidunt. Etiam sit amet orci eget eros faucibus tincidunt.
Code
1<AccordionmaxWidth="60%">
2 ...
3<AccordionItemlabel="Accordion Item 2"open>
4 ...
5</AccordionItem>
6 ...
7</Accordion>
Background of button
Secondary
Integer tincidunt. Etiam sit amet orci eget eros faucibus tincidunt.
Integer tincidunt. Etiam sit amet orci eget eros faucibus tincidunt.
Integer tincidunt. Etiam sit amet orci eget eros faucibus tincidunt.
Integer tincidunt. Etiam sit amet orci eget eros faucibus tincidunt.
Integer tincidunt. Etiam sit amet orci eget eros faucibus tincidunt.
Integer tincidunt. Etiam sit amet orci eget eros faucibus tincidunt.
Tertiary
Integer tincidunt. Etiam sit amet orci eget eros faucibus tincidunt.
Integer tincidunt. Etiam sit amet orci eget eros faucibus tincidunt.
Integer tincidunt. Etiam sit amet orci eget eros faucibus tincidunt.
Integer tincidunt. Etiam sit amet orci eget eros faucibus tincidunt.
Integer tincidunt. Etiam sit amet orci eget eros faucibus tincidunt.
Integer tincidunt. Etiam sit amet orci eget eros faucibus tincidunt.
Code
1<Accordionbackground="secondary">
2 ...
3</Accordion>
4
5<Accordionbackground="tertiary">
6 ...
7</Accordion>
Size
Integer tincidunt. Etiam sit amet orci eget eros faucibus tincidunt.
Integer tincidunt. Etiam sit amet orci eget eros faucibus tincidunt.
Integer tincidunt. Etiam sit amet orci eget eros faucibus tincidunt.
Integer tincidunt. Etiam sit amet orci eget eros faucibus tincidunt.
Integer tincidunt. Etiam sit amet orci eget eros faucibus tincidunt.
Integer tincidunt. Etiam sit amet orci eget eros faucibus tincidunt.
Integer tincidunt. Etiam sit amet orci eget eros faucibus tincidunt.
Integer tincidunt. Etiam sit amet orci eget eros faucibus tincidunt.
Integer tincidunt. Etiam sit amet orci eget eros faucibus tincidunt.
Integer tincidunt. Etiam sit amet orci eget eros faucibus tincidunt.
Integer tincidunt. Etiam sit amet orci eget eros faucibus tincidunt.
Integer tincidunt. Etiam sit amet orci eget eros faucibus tincidunt.
Integer tincidunt. Etiam sit amet orci eget eros faucibus tincidunt.
Integer tincidunt. Etiam sit amet orci eget eros faucibus tincidunt.
Integer tincidunt. Etiam sit amet orci eget eros faucibus tincidunt.
Integer tincidunt. Etiam sit amet orci eget eros faucibus tincidunt.
Integer tincidunt. Etiam sit amet orci eget eros faucibus tincidunt.
Integer tincidunt. Etiam sit amet orci eget eros faucibus tincidunt.
Integer tincidunt. Etiam sit amet orci eget eros faucibus tincidunt.
Integer tincidunt. Etiam sit amet orci eget eros faucibus tincidunt.
Integer tincidunt. Etiam sit amet orci eget eros faucibus tincidunt.
Integer tincidunt. Etiam sit amet orci eget eros faucibus tincidunt.
Integer tincidunt. Etiam sit amet orci eget eros faucibus tincidunt.
Integer tincidunt. Etiam sit amet orci eget eros faucibus tincidunt.
Code
1<Accordionsize="small">
2 ...
3</Accordion>
4
5<Accordion>
6 ...
7</Accordion>
8
9<Accordionsize="large">
10 ...
11</Accordion>
12
13<Accordionsize="xlarge">
14 ...
15</Accordion>
Borderless
Integer tincidunt. Etiam sit amet orci eget eros faucibus tincidunt.
Integer tincidunt. Etiam sit amet orci eget eros faucibus tincidunt.
Integer tincidunt. Etiam sit amet orci eget eros faucibus tincidunt.
Integer tincidunt. Etiam sit amet orci eget eros faucibus tincidunt.
Integer tincidunt. Etiam sit amet orci eget eros faucibus tincidunt.
Integer tincidunt. Etiam sit amet orci eget eros faucibus tincidunt.
Code
1<Accordionborder={false}>
2 ...
3</Accordion>
Design
Accordions provide an overview of multiple, related sections of content. Accordions are a list of interactive headings that hide or reveal associated content when interacted with.
Problem
As a customer, I want to focus on my current task and also know where specific content resides when i may actually need it.
As a designer, I don’t want to overwhelm my customers with information and options, but I want them to have access to all the information and options they need to complete their task.
Solution
Show the customer only the a heading and reveal associated content on user demand.
Guidance
Keep labels short and succinct
If users will only need a few specific pieces of content within a page.
If you have only a small space to display a lot of content.
Use to reduce visual clutter and simplify the interface.
Use to reduce cognitive load and the feeling of being overwhelmed with long or complex forms and processes.
Use to hide advanced or seldom required functions, whilst still having access to them when needed.
Limit the nested levels of the accordion to 2 levels deep.
Provide additional context for assistive technology users when the child content lacks relevance to the button label.
Make sure interactive elements within the collapsible region are far enough from the headers that users don’t accidentally trigger a collapse.
Accordions are prefarable to tabs as the allow users to look at more than one section at a time.
Avoid using too much content and consider smaller viewports when designing.
Sets the size of the accordion items. If not set "default" is output as the default setting.
background
oneOf: primary, secondary, tertiary
primary
The background shade of the accordion item label region.
headingLevel
oneOf: h2, h3, h4
h2
The heading level of the accordion label.
maxWidth
oneOf: maxWidth and width tokens
100%
Sets the maximum width of the accordion container.
AccordionItem props
Props for the AccordionItem component
Property
Type
Default
Required
Description
children
ReactNode
true
The AccordionItem children content.
label
string
true
The label of the accordion item.
labelContext
string
false
Allows for additional instructions to be inserted into the label, this content is visually hidden and can be used to provide additional context to an interaction for assistive technolgy users.
className
string
false
Allows for specific classNames to be set.
open
boolean
false
Controls the visibility of the accordion item.
onClick
function
Provides a callback that returns the current state of the content - that is whether expanded or collapsed.