Skip to content
Patternfly Logo

Expandable section

Examples

Basic

Uncontrolled

Uncontrolled with dynamic toggle text

Detached

Disclosure variation

Props

ExpandableSection

*required
NameTypeDefaultDescription
childrenReact.ReactNodeContent rendered inside the Expandable Component
classNamestring''Additional classes added to the Expandable Component
contentIdstring''ID of the content of the expandable section
displaySize'default' | 'large''default'Display size variant. Set to large for disclosure styling.
isActivebooleanfalseForces active state
isDetachedbooleanfalseIndicates the expandable section has a detached toggle
isExpandedbooleanFlag to indicate if the content is expanded
isWidthLimitedbooleanfalseFlag to indicate the width of the component is limited. Set to true for disclosure styling.
onToggle(isExpanded: boolean) => void(isExpanded): void => undefinedCallback function to toggle the expandable content. Detached expandable sections should use the onToggle property of ExpandableSectionToggle.
toggleTextstring''Text that appears in the attached toggle
toggleTextCollapsedstring''Text that appears in the attached toggle when collapsed (will override toggleText if both are specified; used for uncontrolled expandable with dynamic toggle text)
toggleTextExpandedstring''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
NameTypeDefaultDescription
childrenReact.ReactNodeContent rendered inside the expandable toggle.
classNamestring''Additional classes added to the expandable toggle.
contentIdstringID of the toggle's respective expandable section content.
direction'up' | 'down''down'Direction the toggle arrow should point when the expandable section is expanded.
isExpandedbooleanfalseFlag indicating if the expandable section is expanded.
onToggle(isExpanded: boolean) => voidCallback function to toggle the expandable content.

CSS variables

.pf-c-expandable-section--pf-c-expandable-section__toggle--PaddingTop
0.375rem
.pf-c-expandable-section--pf-c-expandable-section__toggle--PaddingRight
1rem
.pf-c-expandable-section--pf-c-expandable-section__toggle--PaddingBottom
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--pf-c-expandable-section__toggle--hover--Color
#004080
.pf-c-expandable-section--pf-c-expandable-section__toggle--active--Color
#004080
.pf-c-expandable-section--pf-c-expandable-section__toggle--focus--Color
#004080
.pf-c-expandable-section--pf-c-expandable-section__toggle--m-expanded--Color
#004080
.pf-c-expandable-section--pf-c-expandable-section__toggle-icon--Color
#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--pf-c-expandable-section__content--MarginTop
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--pf-c-expandable-section--m-display-lg__toggle--PaddingTop
1rem
.pf-c-expandable-section--pf-c-expandable-section--m-display-lg__toggle--PaddingRight
1rem
.pf-c-expandable-section--pf-c-expandable-section--m-display-lg__toggle--PaddingBottom
1rem
.pf-c-expandable-section--pf-c-expandable-section--m-display-lg__toggle--PaddingLeft
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--pf-c-expandable-section--m-display-lg__content--PaddingBottom
1.5rem
.pf-c-expandable-section--pf-c-expandable-section--m-display-lg__content--PaddingLeft
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--pf-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor
#06c
.pf-c-expandable-section.pf-m-expanded--pf-c-expandable-section__toggle--Color
#004080
.pf-c-expandable-section.pf-m-expanded--pf-c-expandable-section__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.pf-m-expanded--pf-c-expandable-section--m-display-lg--after--BackgroundColor
#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.pf-m-display-lg--pf-c-expandable-section__toggle--PaddingTop
1rem
.pf-c-expandable-section.pf-m-display-lg--pf-c-expandable-section__toggle--PaddingRight
1rem
.pf-c-expandable-section.pf-m-display-lg--pf-c-expandable-section__toggle--PaddingBottom
1rem
.pf-c-expandable-section.pf-m-display-lg--pf-c-expandable-section__toggle--PaddingLeft
1rem
.pf-c-expandable-section.pf-m-display-lg--pf-c-expandable-section__content--PaddingRight
1.5rem
.pf-c-expandable-section.pf-m-display-lg--pf-c-expandable-section__content--PaddingBottom
1.5rem
.pf-c-expandable-section.pf-m-display-lg--pf-c-expandable-section__content--PaddingLeft
1.5rem
.pf-c-expandable-section.pf-m-display-lg--pf-c-expandable-section__content--MarginTop
0
.pf-c-expandable-section__toggle:hover--pf-c-expandable-section__toggle--Color
#004080
.pf-c-expandable-section__toggle:active--pf-c-expandable-section__toggle--Color
#004080
.pf-c-expandable-section__toggle:focus--pf-c-expandable-section__toggle--Color
#004080
.pf-c-expandable-section__toggle-icon.pf-m-expand-top--pf-c-expandable-section__toggle-icon--Rotate
0

View source on GitHub