Expandable section

An expandable section component is used to support progressive disclosure in a form or page by hiding additional content when you don't want it to be shown by default. An expandable section can contain any type of content such as plain text, form inputs, and charts.

Examples

Basic

Uncontrolled

Uncontrolled with dynamic toggle text

Detached

When passing the isDetached property into <ExpandableSection>, you must also manually pass in the same toggleId and contentId properties to both <ExpandableSection> and <ExpandableSectionToggle>. This will link the content to the toggle via ARIA attributes.

Disclosure variation

Indented

With custom toggle content

By using the toggleContent prop, you can pass in content other than a simple string such as an icon or a badge. When passing in custom content in this way, you should not pass in any interactive element such as a button.

Truncate expansion

By passing in variant="truncate", the expandable content will be visible up to a maximum number of lines before being truncated, with the toggle revealing or hiding the truncated content. By default the expandable content will truncate after 3 lines, and this can be customized by also passing in the truncateMaxLines prop.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nec dignissim turpis, et tristique purus. Phasellus efficitur ante quis dolor viverra imperdiet. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque laoreet, sem ac elementum semper, lectus mauris vestibulum nulla, eget volutpat massa neque vel turpis. Donec finibus enim eu leo accumsan consectetur. Praesent massa diam, tincidunt eu dui ac, ullamcorper elementum est. Phasellus metus felis, venenatis vitae semper nec, porta a metus. Vestibulum justo nisi, imperdiet id eleifend at, varius nec lorem. Fusce porttitor mollis nibh, ut elementum ante commodo tincidunt. Integer tincidunt at ipsum non aliquet.

Props

ExpandableSection

The main expandable section component.
*required
Name	Type	Default	Description
children	React.ReactNode		Content rendered inside the expandable section.
className	string	''	Additional classes added to the expandable section.
contentId	string		Id of the content of the expandable section. When passing in the isDetached property, this property's value should match the contenId property of the expandable section toggle sub-component.
displaySize	'default' \| 'lg'	'default'	Display size variant. Set to "lg" for disclosure styling.
isActive	boolean	false	Forces active state.
isDetached	boolean	false	Indicates the expandable section has a detached toggle.
isExpanded	boolean		Flag to indicate if the content is expanded.
isIndented	boolean	false	Flag to indicate if the content is indented.
isWidthLimited	boolean	false	Flag to indicate the width of the component is limited. Set to "true" for disclosure styling.
onToggle	(event: React.MouseEvent, isExpanded: boolean) => void	(event, isExpanded): void => undefined	Callback function to toggle the expandable section. Detached expandable sections should use the onToggle property of the expandable section toggle sub-component.
toggleContent	React.ReactNode		React node that appears in the attached toggle in place of the toggleText property.
toggleId	string		Id of the toggle of the expandable section, which provides an accessible name to the expandable section content via the aria-labelledby attribute. When the isDetached property is also passed in, the value of this property must match the toggleId property of the expandable section toggle sub-component.
toggleText	string	''	Text that appears in the attached toggle.
toggleTextCollapsed	string	''	Text that appears in the attached toggle when collapsed (will override toggleText if both are specified; used for uncontrolled expandable with dynamic toggle text).
toggleTextExpanded	string	''	Text that appears in the attached toggle when expanded (will override toggleText if both are specified; used for uncontrolled expandable with dynamic toggle text).
truncateMaxLinesBeta	number		Truncates the expandable content to the specified number of lines when using the "truncate" variant.
variantBeta	'default' \| 'truncate'	'default'	Determines the variant of the expandable section. When passing in "truncate" as the variant, the expandable content will be truncated after 3 lines by default.

ExpandableSectionToggle

Acts as the toggle sub-component when the main expandable section component has the isDetached property passed in. Allows for more custom control over the expandable section's toggle.
*required
Name	Type	Default	Description
children	React.ReactNode		Content rendered inside the expandable toggle.
className	string	''	Additional classes added to the expandable toggle.
contentId	string		Id of the toggle's respective expandable section content. The value passed into this property should match the contentId property of the main expandable section component.
direction	'up' \| 'down'	'down'	Direction the toggle arrow should point when the expandable section is expanded.
hasTruncatedContentBeta	boolean	false	Flag to determine toggle styling when the expandable content is truncated.
isExpanded	boolean	false	Flag indicating if the expandable section is expanded.
onToggle	(isExpanded: boolean) => void		Callback function to toggle the expandable content.
toggleId	string		Id of the toggle. The value passed into this property should match the aria-labelledby property of the main expandable section component.

CSS variables

Expand or collapse column	Selector	Variable	Value
	.pf-v5-c-expandable-section	--pf-v5-c-expandable-section__toggle--PaddingTop	0.375rem
--pf-v5-c-expandable-section__toggle--PaddingTop --pf-v5-global--spacer--form-element $pf-v5-global--spacer--form-element pf-size-prem(6px) 0.375rem
	.pf-v5-c-expandable-section	--pf-v5-c-expandable-section__toggle--PaddingRight	1rem
--pf-v5-c-expandable-section__toggle--PaddingRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-expandable-section	--pf-v5-c-expandable-section__toggle--PaddingBottom	0.375rem
--pf-v5-c-expandable-section__toggle--PaddingBottom --pf-v5-global--spacer--form-element $pf-v5-global--spacer--form-element pf-size-prem(6px) 0.375rem
	.pf-v5-c-expandable-section	--pf-v5-c-expandable-section__toggle--PaddingLeft	0
	.pf-v5-c-expandable-section	--pf-v5-c-expandable-section__toggle--MarginTop	0
	.pf-v5-c-expandable-section	--pf-v5-c-expandable-section__toggle--Color	#06c
--pf-v5-c-expandable-section__toggle--Color --pf-v5-global--link--Color $pf-v5-global--link--Color $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c
	.pf-v5-c-expandable-section	--pf-v5-c-expandable-section__toggle--hover--Color	#004080
--pf-v5-c-expandable-section__toggle--hover--Color --pf-v5-global--link--Color--hover $pf-v5-global--link--Color--hover $pf-v5-global--primary-color--200 $pf-v5-color-blue-500 #004080
	.pf-v5-c-expandable-section	--pf-v5-c-expandable-section__toggle--active--Color	#004080
--pf-v5-c-expandable-section__toggle--active--Color --pf-v5-global--link--Color--hover $pf-v5-global--link--Color--hover $pf-v5-global--primary-color--200 $pf-v5-color-blue-500 #004080
	.pf-v5-c-expandable-section	--pf-v5-c-expandable-section__toggle--focus--Color	#004080
--pf-v5-c-expandable-section__toggle--focus--Color --pf-v5-global--link--Color--hover $pf-v5-global--link--Color--hover $pf-v5-global--primary-color--200 $pf-v5-color-blue-500 #004080
	.pf-v5-c-expandable-section	--pf-v5-c-expandable-section__toggle--m-expanded--Color	#004080
--pf-v5-c-expandable-section__toggle--m-expanded--Color --pf-v5-global--link--Color--hover $pf-v5-global--link--Color--hover $pf-v5-global--primary-color--200 $pf-v5-color-blue-500 #004080
	.pf-v5-c-expandable-section	--pf-v5-c-expandable-section__toggle--BackgroundColor	transparent
	.pf-v5-c-expandable-section	--pf-v5-c-expandable-section__toggle-icon--MinWidth	1em
	.pf-v5-c-expandable-section	--pf-v5-c-expandable-section__toggle-icon--Color	#151515
--pf-v5-c-expandable-section__toggle-icon--Color --pf-v5-global--Color--100 $pf-v5-global--Color--100 $pf-v5-color-black-900 #151515
	.pf-v5-c-expandable-section	--pf-v5-c-expandable-section__toggle-icon--Transition	.2s ease-in 0s
	.pf-v5-c-expandable-section	--pf-v5-c-expandable-section__toggle-icon--Rotate	0
	.pf-v5-c-expandable-section	--pf-v5-c-expandable-section__toggle-icon--m-expand-top--Rotate	0
	.pf-v5-c-expandable-section	--pf-v5-c-expandable-section--m-expanded__toggle-icon--Rotate	90deg
	.pf-v5-c-expandable-section	--pf-v5-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate	-90deg
	.pf-v5-c-expandable-section	--pf-v5-c-expandable-section__toggle-text--MarginLeft	calc(0.25rem + 0.5rem)
--pf-v5-c-expandable-section__toggle-text--MarginLeft calc(--pf-v5-global--spacer--xs + --pf-v5-global--spacer--sm) calc($pf-v5-global--spacer--xs + $pf-v5-global--spacer--sm) calc(pf-size-prem(4px) + pf-size-prem(8px)) calc(0.25rem + 0.5rem)
	.pf-v5-c-expandable-section	--pf-v5-c-expandable-section__content--MarginTop	1rem
--pf-v5-c-expandable-section__content--MarginTop --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-expandable-section	--pf-v5-c-expandable-section__content--MaxWidth	auto
	.pf-v5-c-expandable-section	--pf-v5-c-expandable-section--m-limit-width__content--MaxWidth	46.875rem
	.pf-v5-c-expandable-section	--pf-v5-c-expandable-section--m-display-lg--BoxShadow	0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)
--pf-v5-c-expandable-section--m-display-lg--BoxShadow --pf-v5-global--BoxShadow--md $pf-v5-global--BoxShadow--md 0 pf-size-prem(4px) pf-size-prem(8px) pf-size-prem(0) rgba($pf-v5-color-black-1000, .12), 0 0 pf-size-prem(4px) 0 rgba($pf-v5-color-black-1000, .06) 0 pf-size-prem(4px) pf-size-prem(8px) pf-size-prem(0) rgba(#030303, .12), 0 0 pf-size-prem(4px) 0 rgba(#030303, .06) 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)
	.pf-v5-c-expandable-section	--pf-v5-c-expandable-section--m-display-lg__toggle--PaddingTop	1rem
--pf-v5-c-expandable-section--m-display-lg__toggle--PaddingTop --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-expandable-section	--pf-v5-c-expandable-section--m-display-lg__toggle--PaddingRight	1rem
--pf-v5-c-expandable-section--m-display-lg__toggle--PaddingRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-expandable-section	--pf-v5-c-expandable-section--m-display-lg__toggle--PaddingBottom	1rem
--pf-v5-c-expandable-section--m-display-lg__toggle--PaddingBottom --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-expandable-section	--pf-v5-c-expandable-section--m-display-lg__toggle--PaddingLeft	1rem
--pf-v5-c-expandable-section--m-display-lg__toggle--PaddingLeft --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-expandable-section	--pf-v5-c-expandable-section--m-display-lg__content--MarginTop	0
	.pf-v5-c-expandable-section	--pf-v5-c-expandable-section--m-display-lg__content--PaddingRight	1.5rem
--pf-v5-c-expandable-section--m-display-lg__content--PaddingRight --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-v5-c-expandable-section	--pf-v5-c-expandable-section--m-display-lg__content--PaddingBottom	1.5rem
--pf-v5-c-expandable-section--m-display-lg__content--PaddingBottom --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-v5-c-expandable-section	--pf-v5-c-expandable-section--m-display-lg__content--PaddingLeft	1.5rem
--pf-v5-c-expandable-section--m-display-lg__content--PaddingLeft --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-v5-c-expandable-section	--pf-v5-c-expandable-section--m-display-lg--after--BackgroundColor	transparent
	.pf-v5-c-expandable-section	--pf-v5-c-expandable-section--m-display-lg--after--Width	3px
--pf-v5-c-expandable-section--m-display-lg--after--Width --pf-v5-global--BorderWidth--lg $pf-v5-global--BorderWidth--lg 3px
	.pf-v5-c-expandable-section	--pf-v5-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor	#06c
--pf-v5-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c
	.pf-v5-c-expandable-section	--pf-v5-c-expandable-section--m-indented__content--PaddingLeft	calc(calc(0.25rem + 0.5rem) + 1em)
--pf-v5-c-expandable-section--m-indented__content--PaddingLeft calc(--pf-v5-c-expandable-section__toggle-text--MarginLeft + --pf-v5-c-expandable-section__toggle-icon--MinWidth) calc(calc(--pf-v5-global--spacer--xs + --pf-v5-global--spacer--sm) + 1em) calc(calc($pf-v5-global--spacer--xs + $pf-v5-global--spacer--sm) + 1em) calc(calc(pf-size-prem(4px) + pf-size-prem(8px)) + 1em) calc(calc(0.25rem + 0.5rem) + 1em)
	.pf-v5-c-expandable-section	--pf-v5-c-expandable-section--m-truncate__content--LineClamp	3
	.pf-v5-c-expandable-section	--pf-v5-c-expandable-section--m-truncate__toggle--MarginTop	0.25rem
--pf-v5-c-expandable-section--m-truncate__toggle--MarginTop --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-v5-c-expandable-section.pf-m-expanded	--pf-v5-c-expandable-section__toggle--Color	#004080
--pf-v5-c-expandable-section__toggle--Color --pf-v5-c-expandable-section__toggle--m-expanded--Color --pf-v5-global--link--Color--hover $pf-v5-global--link--Color--hover $pf-v5-global--primary-color--200 $pf-v5-color-blue-500 #004080
	.pf-v5-c-expandable-section.pf-m-expanded	--pf-v5-c-expandable-section__toggle-icon--Rotate	90deg
--pf-v5-c-expandable-section__toggle-icon--Rotate --pf-v5-c-expandable-section--m-expanded__toggle-icon--Rotate 90deg
	.pf-v5-c-expandable-section.pf-m-expanded	--pf-v5-c-expandable-section__toggle-icon--m-expand-top--Rotate	-90deg
--pf-v5-c-expandable-section__toggle-icon--m-expand-top--Rotate --pf-v5-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate -90deg
	.pf-v5-c-expandable-section.pf-m-expanded	--pf-v5-c-expandable-section--m-display-lg--after--BackgroundColor	#06c
--pf-v5-c-expandable-section--m-display-lg--after--BackgroundColor --pf-v5-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c
	.pf-v5-c-expandable-section.pf-m-detached	--pf-v5-c-expandable-section__content--MarginTop	0
	.pf-v5-c-expandable-section.pf-m-detached	--pf-v5-c-expandable-section--m-truncate__toggle--MarginTop	0
	.pf-v5-c-expandable-section.pf-m-limit-width	--pf-v5-c-expandable-section__content--MaxWidth	46.875rem
--pf-v5-c-expandable-section__content--MaxWidth --pf-v5-c-expandable-section--m-limit-width__content--MaxWidth 46.875rem
	.pf-v5-c-expandable-section.pf-m-display-lg	--pf-v5-c-expandable-section__toggle--PaddingTop	1rem
--pf-v5-c-expandable-section__toggle--PaddingTop --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingTop --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-expandable-section.pf-m-display-lg	--pf-v5-c-expandable-section__toggle--PaddingRight	1rem
--pf-v5-c-expandable-section__toggle--PaddingRight --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingRight --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-expandable-section.pf-m-display-lg	--pf-v5-c-expandable-section__toggle--PaddingBottom	1rem
--pf-v5-c-expandable-section__toggle--PaddingBottom --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingBottom --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-expandable-section.pf-m-display-lg	--pf-v5-c-expandable-section__toggle--PaddingLeft	1rem
--pf-v5-c-expandable-section__toggle--PaddingLeft --pf-v5-c-expandable-section--m-display-lg__toggle--PaddingLeft --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem
	.pf-v5-c-expandable-section.pf-m-display-lg	--pf-v5-c-expandable-section__content--PaddingRight	1.5rem
--pf-v5-c-expandable-section__content--PaddingRight --pf-v5-c-expandable-section--m-display-lg__content--PaddingRight --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-v5-c-expandable-section.pf-m-display-lg	--pf-v5-c-expandable-section__content--PaddingBottom	1.5rem
--pf-v5-c-expandable-section__content--PaddingBottom --pf-v5-c-expandable-section--m-display-lg__content--PaddingBottom --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-v5-c-expandable-section.pf-m-display-lg	--pf-v5-c-expandable-section__content--PaddingLeft	1.5rem
--pf-v5-c-expandable-section__content--PaddingLeft --pf-v5-c-expandable-section--m-display-lg__content--PaddingLeft --pf-v5-global--spacer--lg $pf-v5-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-v5-c-expandable-section.pf-m-display-lg	--pf-v5-c-expandable-section__content--MarginTop	0
--pf-v5-c-expandable-section__content--MarginTop --pf-v5-c-expandable-section--m-display-lg__content--MarginTop 0
	.pf-v5-c-expandable-section.pf-m-indented	--pf-v5-c-expandable-section__content--PaddingLeft	calc(calc(0.25rem + 0.5rem) + 1em)
--pf-v5-c-expandable-section__content--PaddingLeft --pf-v5-c-expandable-section--m-indented__content--PaddingLeft calc(--pf-v5-c-expandable-section__toggle-text--MarginLeft + --pf-v5-c-expandable-section__toggle-icon--MinWidth) calc(calc(--pf-v5-global--spacer--xs + --pf-v5-global--spacer--sm) + 1em) calc(calc($pf-v5-global--spacer--xs + $pf-v5-global--spacer--sm) + 1em) calc(calc(pf-size-prem(4px) + pf-size-prem(8px)) + 1em) calc(calc(0.25rem + 0.5rem) + 1em)
	.pf-v5-c-expandable-section.pf-m-truncate	--pf-v5-c-expandable-section__toggle--MarginTop	0.25rem
--pf-v5-c-expandable-section__toggle--MarginTop --pf-v5-c-expandable-section--m-truncate__toggle--MarginTop --pf-v5-global--spacer--xs $pf-v5-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-v5-c-expandable-section.pf-m-truncate	--pf-v5-c-expandable-section__toggle--PaddingTop	0
	.pf-v5-c-expandable-section.pf-m-truncate	--pf-v5-c-expandable-section__toggle--PaddingRight	0
	.pf-v5-c-expandable-section.pf-m-truncate	--pf-v5-c-expandable-section__toggle--PaddingBottom	0
	.pf-v5-c-expandable-section.pf-m-truncate	--pf-v5-c-expandable-section__toggle-text--MarginLeft	0
	.pf-v5-c-expandable-section__toggle:hover	--pf-v5-c-expandable-section__toggle--Color	#004080
--pf-v5-c-expandable-section__toggle--Color --pf-v5-c-expandable-section__toggle--hover--Color --pf-v5-global--link--Color--hover $pf-v5-global--link--Color--hover $pf-v5-global--primary-color--200 $pf-v5-color-blue-500 #004080
	.pf-v5-c-expandable-section__toggle:active	--pf-v5-c-expandable-section__toggle--Color	#004080
--pf-v5-c-expandable-section__toggle--Color --pf-v5-c-expandable-section__toggle--active--Color --pf-v5-global--link--Color--hover $pf-v5-global--link--Color--hover $pf-v5-global--primary-color--200 $pf-v5-color-blue-500 #004080
	.pf-v5-c-expandable-section__toggle:focus	--pf-v5-c-expandable-section__toggle--Color	#004080
--pf-v5-c-expandable-section__toggle--Color --pf-v5-c-expandable-section__toggle--focus--Color --pf-v5-global--link--Color--hover $pf-v5-global--link--Color--hover $pf-v5-global--primary-color--200 $pf-v5-color-blue-500 #004080
	.pf-v5-c-expandable-section__toggle-icon.pf-m-expand-top	--pf-v5-c-expandable-section__toggle-icon--Rotate	0
--pf-v5-c-expandable-section__toggle-icon--Rotate --pf-v5-c-expandable-section__toggle-icon--m-expand-top--Rotate 0

View source on GitHub