Examples
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
You can pass in the displaySize="lg" property for a disclosure variation styling.
Indented expandable content
You can indent the expandable content by passing in the isIndented property. This will not affect the expandable toggle.
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.
Props
ExpandableSection
| 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. |
| 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). |
| truncateMaxLines | number | Truncates the expandable content to the specified number of lines when using the "truncate" variant. | |
| variant | '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
| 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. |
| hasTruncatedContent | 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-v6-c-expandable-section | --pf-v6-c-expandable-section--Gap | 0.5rem | ||
| ||||
| .pf-v6-c-expandable-section | --pf-v6-c-expandable-section__toggle-icon--MinWidth | 1em | ||
| .pf-v6-c-expandable-section | --pf-v6-c-expandable-section__toggle-icon--Color | (In light theme) #1f1f1f | ||
| ||||
| .pf-v6-c-expandable-section | --pf-v6-c-expandable-section__toggle-icon--Transition | .2s ease-in 0s | ||
| .pf-v6-c-expandable-section | --pf-v6-c-expandable-section__toggle-icon--Rotate | 0 | ||
| .pf-v6-c-expandable-section | --pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate | 0 | ||
| .pf-v6-c-expandable-section | --pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate | 90deg | ||
| .pf-v6-c-expandable-section | --pf-v6-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate | -90deg | ||
| .pf-v6-c-expandable-section | --pf-v6-c-expandable-section__content--MaxWidth | auto | ||
| .pf-v6-c-expandable-section | --pf-v6-c-expandable-section--m-limit-width__content--MaxWidth | 46.875rem | ||
| .pf-v6-c-expandable-section | --pf-v6-c-expandable-section--m-display-lg--PaddingBlockStart | 0.5rem | ||
| ||||
| .pf-v6-c-expandable-section | --pf-v6-c-expandable-section--m-display-lg--PaddingBlockEnd | 0.5rem | ||
| ||||
| .pf-v6-c-expandable-section | --pf-v6-c-expandable-section--m-display-lg--PaddingInlineStart | 1rem | ||
| ||||
| .pf-v6-c-expandable-section | --pf-v6-c-expandable-section--m-display-lg--PaddingInlineEnd | 1rem | ||
| ||||
| .pf-v6-c-expandable-section | --pf-v6-c-expandable-section--m-display-lg--m-expanded--PaddingBlockEnd | 1rem | ||
| ||||
| .pf-v6-c-expandable-section | --pf-v6-c-expandable-section--m-display-lg--BackgroundColor | (In light theme) #f2f2f2 | ||
| ||||
| .pf-v6-c-expandable-section | --pf-v6-c-expandable-section--m-display-lg--BorderWidth | 1px | ||
| ||||
| .pf-v6-c-expandable-section | --pf-v6-c-expandable-section--m-display-lg--BorderColor | (In light theme) #c7c7c7 | ||
| ||||
| .pf-v6-c-expandable-section | --pf-v6-c-expandable-section--m-display-lg--BorderRadius | 16px | ||
| ||||
| .pf-v6-c-expandable-section | --pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart | calc(0.5rem + 0.5rem + 1em) | ||
| ||||
| .pf-v6-c-expandable-section | --pf-v6-c-expandable-section--m-truncate__content--LineClamp | 3 | ||
| .pf-v6-c-expandable-section | --pf-v6-c-expandable-section--m-truncate--Gap | 0.25rem | ||
| ||||
| .pf-v6-c-expandable-section.pf-m-expanded | --pf-v6-c-expandable-section__toggle-icon--Rotate | 90deg | ||
| ||||
| .pf-v6-c-expandable-section.pf-m-expanded | --pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate | -90deg | ||
| ||||
| .pf-v6-c-expandable-section.pf-m-expanded | --pf-v6-c-expandable-section--m-display-lg--PaddingBlockEnd | 1rem | ||
| ||||
| .pf-v6-c-expandable-section.pf-m-limit-width | --pf-v6-c-expandable-section__content--MaxWidth | 46.875rem | ||
| ||||
| .pf-v6-c-expandable-section.pf-m-indented | --pf-v6-c-expandable-section__content--PaddingInlineStart | calc(0.5rem + 0.5rem + 1em) | ||
| ||||
| .pf-v6-c-expandable-section.pf-m-truncate | --pf-v6-c-expandable-section--Gap | 0.25rem | ||
| ||||
| .pf-v6-c-expandable-section__toggle-icon.pf-m-expand-top | --pf-v6-c-expandable-section__toggle-icon--Rotate | 0 | ||
| ||||