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

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 Beta

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' \| 'large'	'default'	Display size variant. Set to "large" 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	(isExpanded: boolean) => void	(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.
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.

CSS variables


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

View source on GitHub

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

Privacy statement Terms of use All policies and guidelines