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

ExamplesCSS Variables

Examples

Simple expandable

Copied to clipboard

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_FontWeight500
--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--m-expanded--Colorc_expandable__toggle_m_expanded_Color#004080