Accordion

Skip to page content

BETA

Component demo

Interactive example

English Breakfast

A blend of different black teas.

Earl Grey

A tea blend that has been flavoured with oil of bergamot.

Web component

React

<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>

<IcAccordionheading="English Breakfast">
<IcTypographyvariant="body">
    A blend of different black teas.
</IcTypography>
</IcAccordion>
<IcAccordionheading="Earl Grey">
<IcTypographyvariant="body">
    A tea blend that has been flavoured with oil of bergamot.
</IcTypography>
</IcAccordion>

Accordion details

Props

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

Name	Description	Default
Property disabled Attribute disabled	If`true` , the accordion will be disabled. type: boolean	false
Property expanded Attribute expanded	If`true` , the accordion appears expanded. type: boolean	false
Property heading Attribute heading	The section header outlining section content. type: string	""
Property message Attribute message	The main body message of the accordion. type: string	""
Property size Attribute size	The size of the accordion. type: IcSizes - "default" \| "large" \| "small"	"default"

Property

disabled

Attribute

disabled

Iftrue , the accordion will be disabled.

type: boolean

Default: false

Property

expanded

Attribute

expanded

Iftrue , the accordion appears expanded.

type: boolean

Default: false

Property

heading

Attribute

heading

The section header outlining section content.

type: string

Default: ""

Property

message

Attribute

message

The main body message of the accordion.

type: string

Default: ""

Property

size

Attribute

size

The size of the accordion.

type: IcSizes - "default" | "large" | "small"

Default: "default"

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.

Name	Description
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	"accordions"
Property appearance Attribute appearance	The appearance of the accordion group, e.g dark, or light. type: IcThemeForeground - "dark" \| "default" \| "light"	"default"
Property expanded Attribute expanded	If`true` , the accordion will load in an expanded state. type: boolean	false
Property groupTitle Attribute group-title	The header for the accordion group. type: string	""
Property singleExpansion Attribute single-expansion	If`true` , only one accordion will open at a time. type: boolean	false
Property size Attribute size	The size of the accordion. type: IcSizes - "default" \| "large" \| "small"	"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

Default: "accordions"

Property

appearance

Attribute

appearance

The appearance of the accordion group, e.g dark, or light.

type: IcThemeForeground - "dark" | "default" | "light"

Default: "default"

Property

expanded

Attribute

expanded

Iftrue , the accordion will load in an expanded state.

type: boolean

Default: false

Property

groupTitle

Attribute

group-title

The header for the accordion group.

type: string

Default: ""

Property

singleExpansion

Attribute

single-expansion

Iftrue , only one accordion will open at a time.

type: boolean

Default: false

Property

size

Attribute

size

The size of the accordion.

type: IcSizes - "default" | "large" | "small"

Default: "default"

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.

Name	Description
Slot group-title	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

English Breakfast

A blend of different black teas.

Earl Grey

A tea blend that has been flavoured with oil of bergamot.

Web component

React

<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>

<IcAccordionheading="English Breakfast">
<SlottedSVG
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"/>
</SlottedSVG>
<IcTypographyvariant="body">
    A blend of different black teas.
</IcTypography>
</IcAccordion>
<IcAccordionheading="Earl Grey">
<SlottedSVG
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"/>
</SlottedSVG>
<IcTypographyvariant="body">
    A tea blend that has been flavoured with oil of bergamot.
</IcTypography>
</IcAccordion>

With group title and see all / hide all button

Interactive example

Coffee

Cappuccino

An espresso-based drink that is traditionally prepared with steamed milk foam.

Americano

An espresso-based drink that is diluted with hot water.

Web component

React

<ic-accordion-groupgroup-title="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>

<IcAccordionGroupgroupTitle="Coffee">
<IcAccordionheading="Cappucino">
<IcTypographyvariant="body">
      An espresso-based drink that is traditionally prepared with steamed milk foam.
</IcTypography>
</IcAccordion>
<IcAccordionheading="Americano">
<IcTypographyvariant="body">
      An espresso-based drink that is diluted with hot water.
</IcTypography>
</IcAccordion>
</IcAccordionGroup>

With nested accordions

Interactive example

Coffee

Cappuccino

An espresso-based drink that is traditionally prepared with steamed milk foam.

Other coffees

Americano

An espresso-based drink that is diluted with hot water.

Latte

A milkier coffee than a cappuccino.

Web component

React

<ic-accordion-groupgroup-title="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>

<IcAccordionGroupgroupTitle="Coffee">
<IcAccordionheading="Cappucino">
<IcTypographyvariant="body">
      An espresso-based drink that is traditionally prepared with steamed milk foam.
</IcTypography>
</IcAccordion>
<IcAccordionheading="Other coffees">
<IcAccordionheading="Americano">
<IcTypographyvariant="body">
        An espresso-based drink that is diluted with hot water.
</IcTypography>
</IcAccordion>
<IcAccordionheading="Latte">
<IcTypographyvariant="body">
        A milkier coffee than a cappuccino.
</IcTypography>
</IcAccordion>
</IcAccordion>
</IcAccordionGroup>

Last reviewed 31 May 2024 .