React

Expandable

The expandable component is used to embed an expandable section within a form when you don’t want controls or information to be shown by default. This may be used to hide advanced features, for example. Related design guidelines: Forms

ExamplesPropsCSS Variables

Examples

Basic

Uncontrolled

Uncontrolled with dynamic toggle text

Props

Expandable properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodeContent rendered inside the Expandable Component
classNamestring''Additional classes added to the Expandable Component
isExpandedbooleanFlag to indicate if the content is expanded
toggleTextstring''Text that appears in the toggle
toggleTextExpandedstring''Text that appears in the toggle when expanded (will override toggleText if both are specified; used for uncontrolled expandable with dynamic toggle text)
toggleTextCollapsedstring''Text that appears in the toggle when collapsed (will override toggleText if both are specified; used for uncontrolled expandable with dynamic toggle text)
onToggle() => void(): any => undefinedCallback function to toggle the expandable content
isFocusedbooleanfalseForces focus state
isHoveredbooleanfalseForces hover state
isActivebooleanfalseForces active state

CSS Variables

--pf-c-expandable__content--MarginTopc_expandable__content_MarginTop
1rem
--pf-c-expandable__toggle--active--Colorc_expandable__toggle_active_Color
#004080
--pf-c-expandable__toggle--Colorc_expandable__toggle_Color
#004080
--pf-c-expandable__toggle--focus--Colorc_expandable__toggle_focus_Color
#004080
--pf-c-expandable__toggle--FontWeightc_expandable__toggle_FontWeight
400
--pf-c-expandable__toggle--hover--Colorc_expandable__toggle_hover_Color
#004080
--pf-c-expandable__toggle-icon--Colorc_expandable__toggle_icon_Color
#151515
--pf-c-expandable__toggle-icon--MarginRightc_expandable__toggle_icon_MarginRight
0.5rem
--pf-c-expandable__toggle-icon--Transitionc_expandable__toggle_icon_Transition
.2s ease-in 0s
--pf-c-expandable__toggle--m-expanded--Colorc_expandable__toggle_m_expanded_Color
#004080
--pf-c-expandable__toggle--PaddingBottomc_expandable__toggle_PaddingBottom
0.375rem
--pf-c-expandable__toggle--PaddingLeftc_expandable__toggle_PaddingLeft
0
--pf-c-expandable__toggle--PaddingRightc_expandable__toggle_PaddingRight
1rem
--pf-c-expandable__toggle--PaddingTopc_expandable__toggle_PaddingTop
0.375rem
--pf-c-expandable--m-expanded__toggle-icon--Transformc_expandable_m_expanded__toggle_icon_Transform
rotate(90deg)