Skip to main content Intelligence Community Design System ICDS Get started Accessibility Styles Components Patterns Community
Skip to page content Show navigation section

Accordion

Guidance Code Accessibility

Component demo

Interactive example

A blend of different black teas. A tea blend that has been flavoured with oil of bergamot.
Web component React
StackBlitz
Show full code 
<ic-accordionheading="English Breakfast">
<ic-typographyvariant="body">
    A blend of different black teas.
</ic-typography>
</ic-accordion>
<ic-accordionheading="Earl Grey">
<ic-typographyvariant="body">
    A tea blend that has been flavoured with oil of bergamot.
</ic-typography>
</ic-accordion>

Accordion details

Props

All components also accept native properties supported by the DOM, such asclassName and style .

Name Description Default
Property disabled
Attribute disabled

Iftrue , the accordion will be disabled.

type: boolean - boolean | undefined
false
Property expanded
Attribute expanded

Iftrue , the accordion appears expanded.

type: boolean - boolean | undefined
false
Property heading
Attribute heading

The section header outlining section content.

type: string - string | undefined
""
Property message
Attribute message

The main body message of the accordion.

type: string - string | undefined
""
Property size
Attribute size

The size of the accordion.

type: IcSizes - "large" | "medium" | "small" | undefined
"medium"
Property theme
Attribute theme

Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.

type: IcThemeMode - "dark" | "inherit" | "light" | undefined
"inherit"
Property disabled
Attribute disabled

Iftrue , the accordion will be disabled.

type: boolean - boolean | undefined
Default: false
Property expanded
Attribute expanded

Iftrue , the accordion appears expanded.

type: boolean - boolean | undefined
Default: false
Property heading
Attribute heading

The section header outlining section content.

type: string - string | undefined
Default: ""
Property message
Attribute message

The main body message of the accordion.

type: string - string | undefined
Default: ""
Property size
Attribute size

The size of the accordion.

type: IcSizes - "large" | "medium" | "small" | undefined
Default: "medium"
Property theme
Attribute theme

Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.

type: IcThemeMode - "dark" | "inherit" | "light" | undefined
Default: "inherit"

Slots

A slot allows for any type of element or markup to be passed into and rendered within a web component. This creates more flexibility than using a prop which must take a specific type of data.

Content can be slotted into a component by adding it as a top-level child of the component.

Slots can have a name to identify them. These specify which slot the content will be inserted into, and therefore where it will be rendered and how it will be used within the component. The name of the slot to be used can be specified by passing it via a slot attribute on the slotted content.

Read more about slots .


Name Description
Slot heading
Content is placed as the accordion heading.
Slot icon
Content is placed to the left of the heading.
Slot heading
Content is placed as the accordion heading.
Slot icon
Content is placed to the left of the heading.

Methods

Name Description Signature
Method setFocus
Sets focus on accordion heading.
setFocus() => Promise<void>
Method setFocus
Sets focus on accordion heading.
setFocus() => Promise<void>

Accordion group details

Props

All components also accept native properties supported by the DOM, such asclassName and style .

Name Description Default
Property accessibleButtonLabel
Attribute accessible-button-label

The accessible button label to provide more context to the 'See all/Hide all' button for screen reader users.

type: string - string | undefined
"accordions"
Property expanded
Attribute expanded

Iftrue , the accordion will load in an expanded state.

type: boolean - boolean | undefined
false
Property label
Attribute label

The header for the accordion group.

type: string - string | undefined
""
Property singleExpansion
Attribute single-expansion

Iftrue , only one accordion will open at a time.

type: boolean - boolean | undefined
false
Property size
Attribute size

The size of the accordion.

type: IcSizes - "large" | "medium" | "small" | undefined
"medium"
Property theme
Attribute theme

Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.

type: IcThemeMode - "dark" | "inherit" | "light" | undefined
"inherit"
Property accessibleButtonLabel
Attribute accessible-button-label

The accessible button label to provide more context to the 'See all/Hide all' button for screen reader users.

type: string - string | undefined
Default: "accordions"
Property expanded
Attribute expanded

Iftrue , the accordion will load in an expanded state.

type: boolean - boolean | undefined
Default: false
Property label
Attribute label

The header for the accordion group.

type: string - string | undefined
Default: ""
Property singleExpansion
Attribute single-expansion

Iftrue , only one accordion will open at a time.

type: boolean - boolean | undefined
Default: false
Property size
Attribute size

The size of the accordion.

type: IcSizes - "large" | "medium" | "small" | undefined
Default: "medium"
Property theme
Attribute theme

Sets the theme color to the dark or light theme color. "inherit" will set the color based on the system settings or ic-theme component.

type: IcThemeMode - "dark" | "inherit" | "light" | undefined
Default: "inherit"

Slots

A slot allows for any type of element or markup to be passed into and rendered within a web component. This creates more flexibility than using a prop which must take a specific type of data.

Content can be slotted into a component by adding it as a top-level child of the component.

Slots can have a name to identify them. These specify which slot the content will be inserted into, and therefore where it will be rendered and how it will be used within the component. The name of the slot to be used can be specified by passing it via a slot attribute on the slotted content.

Read more about slots .


Name Description
Slot label
Content is placed as the accordion group title.
Slot label
Content is placed as the accordion group title.

Methods

Name Description Signature
Method setFocus
Sets the focus on first focusable element in the accordion group. If the "See/Hide all" button is present, it will be focused. Otherwise, the first accordion will be focused.
setFocus() => Promise<void>
Method setFocus
Sets the focus on first focusable element in the accordion group. If the "See/Hide all" button is present, it will be focused. Otherwise, the first accordion will be focused.
setFocus() => Promise<void>

Variants

With icon

Interactive example

A blend of different black teas. A tea blend that has been flavoured with oil of bergamot.
Web component React
StackBlitz
Show full code 
<ic-accordionheading="English Breakfast">
<svg
slot="icon"
width="24"
height="24"
viewBox="0 0 24 24"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<pathd="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z"/>
</svg>
<ic-typographyvariant="body">
    A blend of different black teas.
</ic-typography>
</ic-accordion>
<ic-accordionheading="Earl Grey">
<svg
slot="icon"
width="24"
height="24"
viewBox="0 0 24 24"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<pathd="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z"/>
</svg>
<ic-typographyvariant="body">
    A tea blend that has been flavoured with oil of bergamot.
</ic-typography>
</ic-accordion>

With accordion group label and see all / hide all button

Interactive example

An espresso-based drink that is traditionally prepared with steamed milk foam. An espresso-based drink that is diluted with hot water.
Web component React
StackBlitz
Show full code 
<ic-accordion-grouplabel="Coffee">
<ic-accordionheading="Cappuccino">
<ic-typographyvariant="body">
      An espresso-based drink that is traditionally prepared with steamed milk foam.
</ic-typography>
</ic-accordion>
<ic-accordionheading="Americano">
<ic-typographyvariant="body">
      An espresso-based drink that is diluted with hot water.
</ic-typography>
</ic-accordion>
</ic-accordion-group>

Theme

Interactive example

A blend of different black teas. A tea blend that has been flavoured with oil of bergamot.
Web component React
StackBlitz
Show full code 
<ic-accordion-grouplabel="Coffee"theme="dark">
<ic-accordionheading="English Breakfast">
<svg
slot="icon"
width="24"
height="24"
viewBox="0 0 24 24"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<pathd="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z"/>
</svg>
<ic-typographyvariant="body">
      A blend of different black teas.
</ic-typography>
</ic-accordion>
<ic-accordionheading="Earl Grey">
<svg
slot="icon"
width="24"
height="24"
viewBox="0 0 24 24"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
>
<pathd="M2,21V19H20V21H2M20,8V5H18V8H20M20,3A2,2 0 0,1 22,5V8A2,2 0 0,1 20,10H18V13A4,4 0 0,1 14,17H8A4,4 0 0,1 4,13V3H20M16,5H6V13A2,2 0 0,0 8,15H14A2,2 0 0,0 16,13V5Z"/>
</svg>
<ic-typographyvariant="body">
      A tea blend that has been flavoured with oil of bergamot.
</ic-typography>
</ic-accordion>
</ic-accordion-group>

With nested accordions

Interactive example

An espresso-based drink that is traditionally prepared with steamed milk foam. An espresso-based drink that is diluted with hot water. A milkier coffee than a cappuccino.
Web component React
StackBlitz
Show full code 
<ic-accordion-grouplabel="Coffee">
<ic-accordionheading="Cappuccino">
<ic-typographyvariant="body">
      An espresso-based drink that is traditionally prepared with steamed milk foam.
</ic-typography>
</ic-accordion>
<ic-accordionheading="Other coffees">
<ic-accordionheading="Americano">
<ic-typographyvariant="body">
        An espresso-based drink that is diluted with hot water.
</ic-typography>
</ic-accordion>
<ic-accordionheading="Latte">
<ic-typographyvariant="body">
        A milkier coffee than a cappuccino.
</ic-typography>
</ic-accordion>
</ic-accordion>
</ic-accordion-group>
Last reviewed 31 May 2024 .
Accessibility Statement Privacy Policy Cookies and Storage Policy Versions
Go to S.I.S. website Go to MI5 website Go to GCHQ website
Navigated to Accordion - Intelligence Community Design System