Examples
Split toggle with labeled checkbox
To add a label to a split toggle that will be linked to the checkbox, pass the text wrapped in span.pf-v6-c-check__label as a child to label.pf-v6-c-check. Clicking the text will update the checked state of the split toggle's checkbox.
Shown with default, primary, and secondary styling
Split toggle with checkbox and toggle text
To add a label to a split toggle that will be linked to the toggle button, pass the text wrapped in span.pf-v6-c-menu-toggle__text as a child to button.pf-v6-c-menu-toggle__button.pf-m-text. Clicking the text should trigger any click action on the toggle.
Shown with default, primary, and secondary styling
Split toggle with checkbox, icon, and toggle text
To add a label to a split toggle that will be linked to the toggle button, pass the text wrapped in span.pf-v6-c-menu-toggle__text as a child to button.pf-v6-c-menu-toggle__button.pf-m-text. Clicking the text should trigger any click action on the toggle.
Shown with default, primary, and secondary styling
Documentation
Accessibility
Class | Applied to | Outcome |
|---|---|---|
aria-expanded="true" | .pf-v6-c-menu-toggle, .pf-v6-c-menu-toggle__button | Indicates that the menu toggle component is in the expanded state. |
aria-expanded="false" | .pf-v6-c-menu-toggle, .pf-v6-c-menu-toggle__button | Indicates that the menu toggle component is in the collapsed state. |
aria-label="Descriptive text" | .pf-v6-c-menu-toggle, .pf-v6-c-menu-toggle.pf-m-plain | Gives the menu toggle component an accessible label. Used whenever there is no text visible in the menu toggle. Often, plain modifiers are used when the menu toggle only contains an icon. |
disabled | .pf-v6-c-menu-toggle, .pf-v6-c-menu-toggle__button | Indicates that the menu toggle component is disabled. |
Usage
Class | Applied | Outcome |
|---|---|---|
.pf-v6-c-menu-toggle | <button> | Initiates the menu toggle component. |
.pf-v6-c-menu-toggle__icon | <span> | Defines the menu toggle component icon/image. |
.pf-v6-c-menu-toggle__text | <span> | Defines the menu toggle component text. |
.pf-v6-c-menu-toggle__count | <span> | Defines the menu toggle component count. |
.pf-v6-c-menu-toggle__controls | <span> | Defines the menu toggle component controls. |
.pf-v6-c-menu-toggle__toggle-icon | <span> | Defines the menu toggle component toggle/arrow icon. |
.pf-v6-c-menu-toggle__button | <button> | Initiates the menu toggle button. |
.pf-m-split-button | .pf-v6-c-menu-toggle | Modifies the menu toggle component for the split button variation. |
.pf-m-text | .pf-v6-c-menu-toggle__button | Modifies the menu toggle component split button variation with text. |
.pf-m-disabled | .pf-v6-c-menu-toggle | Modifies the menu toggle component for the disabled variation. |
.pf-m-primary | .pf-v6-c-menu-toggle | Modifies the menu toggle component for the primary variation. |
.pf-m-secondary | .pf-v6-c-menu-toggle | Modifies the menu toggle component for the secondary variation. |
.pf-m-text | .pf-v6-c-menu-toggle | Modifies the menu toggle component for the text variation. |
.pf-m-plain | .pf-v6-c-menu-toggle | Modifies the menu toggle component for the plain variation. |
.pf-m-circle | .pf-v6-c-menu-toggle | Modifies the menu toggle component to be circular in shape. This is intended to be applied only to a plain menu toggle without any text. |
.pf-m-expanded | .pf-v6-c-menu-toggle | Modifies the menu toggle component for the expanded state. |
.pf-m-full-height | .pf-v6-c-menu-toggle | Modifies the menu toggle component to full height of parent. |
.pf-m-full-width | .pf-v6-c-menu-toggle | Modifies the menu toggle component to full width of parent. |
.pf-m-form | .pf-v6-c-menu-toggle | Modifies the menu toggle for use in forms with form element border radius. |
.pf-m-success | .pf-v6-c-menu-toggle | Modifies the menu toggle component for the success state. |
.pf-m-warning | .pf-v6-c-menu-toggle | Modifies the menu toggle component for the warning state. |
.pf-m-danger | .pf-v6-c-menu-toggle | Modifies the menu toggle component for the danger state. |
.pf-m-placeholder | .pf-v6-c-menu-toggle | Modifies the menu toggle text for placeholder styles. |
.pf-m-text-expanded | .pf-v6-c-menu-toggle | Modifies a dock menu toggle to show its text. |
