Skip to content
PatternFly logo

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
NameTypeDefaultDescription
childrenReact.ReactNodeContent rendered inside the expandable section.
classNamestring''Additional classes added to the expandable section.
contentIdstring''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.
isActivebooleanfalseForces active state.
isDetachedbooleanfalseIndicates the expandable section has a detached toggle.
isExpandedbooleanFlag to indicate if the content is expanded.
isIndentedbooleanfalseFlag to indicate if the content is indented.
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 section. Detached expandable sections should use the onToggle property of the expandable section toggle sub-component.
toggleContentReact.ReactNodeReact node that appears in the attached toggle in place of the toggleText property.
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).
truncateMaxLinesBetanumberTruncates 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
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. 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.
hasTruncatedContentBetabooleanfalseFlag to determine toggle styling when the expandable content is truncated.
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--MarginTop
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--MinWidth
1em
.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-c-expandable-section--m-indented__content--PaddingLeft
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.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-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.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.pf-m-indented--pf-c-expandable-section__content--PaddingLeft
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.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: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