React

Accordion

Accordions are used to deliver a lot of content in a small space, allowing the user to expand and collapse the component to show or hide information. In the collapsed state, the user will see the most important details about a topic. They can click on the accordion to expand the content area and view additional details.

ExamplesPropsCSS Variables

Examples

Simple accordion with a single expand behavior

Copied to clipboard

Fixed accordion with multiple expand behavior

Copied to clipboard

Props

Accordion Props

The Accordion component accepts the following props.

NameTypeRequiredDefaultDescription
childrenReact.ReactNodenullContent rendered inside the Accordion
classNamestring''Additional classes added to the Accordion
aria-labelstring''Adds accessible text to the Accordion
headingLevel'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6''h3'the heading level to use

AccordionItem Props

The AccordionItem component accepts the following props.

NameTypeRequiredDefaultDescription
childrenReact.ReactNodenullContent rendered inside the Accordion item

AccordionContent Props

The AccordionContent component accepts the following props.

NameTypeRequiredDefaultDescription
childrenReact.ReactNodenullContent rendered inside the Accordion
classNamestring''Additional classes added to the Accordion content
idstring''Identify the AccordionContent item
isHiddenbooleanfalseFlag to show if the expanded content of the Accordion item is visible
isFixedbooleanfalseFlag to indicate Accordion content is fixed
aria-labelstring''Adds accessible text to the Accordion content

AccordionToggle Props

The AccordionToggle component accepts the following props.

NameTypeRequiredDefaultDescription
childrenReact.ReactNodenullContent rendered inside the Accordion toggle
classNamestring''Additional classes added to the Accordion Toggle
isExpandedbooleanfalseFlag to show if the expanded content of the Accordion item is visible
idstringIdentify the Accordion toggle number

CSS Variables

--pf-c-accordion--BackgroundColorc_accordion_BackgroundColor#fff
--pf-c-accordion--BorderWidthc_accordion_BorderWidth1px
--pf-c-accordion--BoxShadowc_accordion_BoxShadow0 0.0625rem 0.0625rem 0rem rgba(3,3,3,.05),0 0.25rem 0.5rem 0.25rem rgba(3,3,3,.06)
--pf-c-accordion--PaddingBottomc_accordion_PaddingBottom2rem
--pf-c-accordion--PaddingTopc_accordion_PaddingTop2rem
--pf-c-accordion__expanded-content--BorderLeftColorc_accordion__expanded_content_BorderLeftColor#06c
--pf-c-accordion__expanded-content--Colorc_accordion__expanded_content_Color#72767b
--pf-c-accordion__expanded-content--FontSizec_accordion__expanded_content_FontSize0.875rem
--pf-c-accordion__expanded-content-body--PaddingBottomc_accordion__expanded_content_body_PaddingBottom0.5rem
--pf-c-accordion__expanded-content-body--PaddingLeftc_accordion__expanded_content_body_PaddingLeft2rem
--pf-c-accordion__expanded-content-body--PaddingRightc_accordion__expanded_content_body_PaddingRight2rem
--pf-c-accordion__expanded-content-body--PaddingTopc_accordion__expanded_content_body_PaddingTop0.5rem
--pf-c-accordion__expanded-content--m-expanded--BorderLeftColorc_accordion__expanded_content_m_expanded_BorderLeftColor#06c
--pf-c-accordion__expanded-content--m-expanded--BorderWidthc_accordion__expanded_content_m_expanded_BorderWidth3px
--pf-c-accordion__expanded-content--m-fixed--MaxHeightc_accordion__expanded_content_m_fixed_MaxHeight9.375rem
--pf-c-accordion__toggle--BorderLeftColorc_accordion__toggle_BorderLeftColor#06c
--pf-c-accordion__toggle--PaddingBottomc_accordion__toggle_PaddingBottom0.5rem
--pf-c-accordion__toggle--PaddingLeftc_accordion__toggle_PaddingLeft2rem
--pf-c-accordion__toggle--PaddingRightc_accordion__toggle_PaddingRight2rem
--pf-c-accordion__toggle--PaddingTopc_accordion__toggle_PaddingTop0.5rem
--pf-c-accordion__toggle--active--BackgroundColorc_accordion__toggle_active_BackgroundColor#f5f5f5
--pf-c-accordion__toggle--focus--BackgroundColorc_accordion__toggle_focus_BackgroundColor#f5f5f5
--pf-c-accordion__toggle--hover--BackgroundColorc_accordion__toggle_hover_BackgroundColor#f5f5f5
--pf-c-accordion__toggle-icon--LineHeightc_accordion__toggle_icon_LineHeight1.5
--pf-c-accordion__toggle-icon--Transitionc_accordion__toggle_icon_Transition.2s ease-in 0s
--pf-c-accordion__toggle--m-expanded--BorderLeftColorc_accordion__toggle_m_expanded_BorderLeftColor#06c
--pf-c-accordion__toggle--m-expanded--BorderWidthc_accordion__toggle_m_expanded_BorderWidth3px
--pf-c-accordion__toggle--m-expanded__toggle-icon--Transformc_accordion__toggle_m_expanded__toggle_icon_Transformrotate(90deg)
--pf-c-accordion__toggle-text--MaxWidthc_accordion__toggle_text_MaxWidthcalc(100% - 1.5rem)
--pf-c-accordion__toggle-text--active--Colorc_accordion__toggle_text_active_Color#004080
--pf-c-accordion__toggle-text--active--FontWeightc_accordion__toggle_text_active_FontWeight500
--pf-c-accordion__toggle-text--expanded--Colorc_accordion__toggle_text_expanded_Color#004080
--pf-c-accordion__toggle-text--expanded--FontWeightc_accordion__toggle_text_expanded_FontWeight500
--pf-c-accordion__toggle-text--focus--Colorc_accordion__toggle_text_focus_Color#004080
--pf-c-accordion__toggle-text--focus--FontWeightc_accordion__toggle_text_focus_FontWeight500
--pf-c-accordion__toggle-text--hover--Colorc_accordion__toggle_text_hover_Color#004080
--pf-c-accordion__toggle-text--hover--FontWeightc_accordion__toggle_text_hover_FontWeight500