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

Accordion definition list example

Copied to clipboard

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'Heading level to use
asDefinitionListbooleantrueFlag to indicate whether use definition list or div

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
componentReact.ElementTypeComponent to use as content container

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
componentReact.ElementTypeContainer to override the default for toggle

AccordionItem props

The AccordionItem component accepts the following props.

NameTypeRequiredDefaultDescription
childrenReact.ReactNodenullContent rendered inside the Accordion item

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#737679
--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_FontWeight700
--pf-c-accordion__toggle-text--expanded--Colorc_accordion__toggle_text_expanded_Color#004080
--pf-c-accordion__toggle-text--expanded--FontWeightc_accordion__toggle_text_expanded_FontWeight700
--pf-c-accordion__toggle-text--focus--Colorc_accordion__toggle_text_focus_Color#004080
--pf-c-accordion__toggle-text--focus--FontWeightc_accordion__toggle_text_focus_FontWeight700
--pf-c-accordion__toggle-text--hover--Colorc_accordion__toggle_text_hover_Color#004080
--pf-c-accordion__toggle-text--hover--FontWeightc_accordion__toggle_text_hover_FontWeight700