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

Simple expandable

Copied to clipboard

Uncontrolled expandable

Copied to clipboard

Props

Expandable props

The Expandable component accepts the following props.

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
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_MarginTop1rem
--pf-c-expandable__toggle--Colorc_expandable__toggle_Color#004080
--pf-c-expandable__toggle--FontWeightc_expandable__toggle_FontWeight400
--pf-c-expandable__toggle--PaddingBottomc_expandable__toggle_PaddingBottom0.375rem
--pf-c-expandable__toggle--PaddingLeftc_expandable__toggle_PaddingLeft0
--pf-c-expandable__toggle--PaddingRightc_expandable__toggle_PaddingRight1rem
--pf-c-expandable__toggle--PaddingTopc_expandable__toggle_PaddingTop0.375rem
--pf-c-expandable__toggle--active--Colorc_expandable__toggle_active_Color#004080
--pf-c-expandable__toggle--focus--Colorc_expandable__toggle_focus_Color#004080
--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_MarginRight0.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--m-expanded__toggle-icon--Transformc_expandable_m_expanded__toggle_icon_Transformrotate(90deg)