Expandable section

Examples

Basic

Uncontrolled

Uncontrolled with dynamic toggle text

Detached

Disclosure variation

Indented

Props

ExpandableSection

*required
Name	Type	Default	Description
children	React.ReactNode		Content rendered inside the Expandable Component
className	string	''	Additional classes added to the Expandable Component
contentId	string	''	ID of the content of the expandable section
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 content. Detached expandable sections should use the onToggle property of ExpandableSectionToggle.
toggleContent	React.ReactNode		React node that appears in the attached toggle in place of toggle text
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)

ExpandableSectionToggle

*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.
direction	'up' \| 'down'	'down'	Direction the toggle arrow should point when the expandable section is expanded.
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--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-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-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__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