Skip to main content Home
About About the Design SystemRoadmap
Get started OverviewDesignersDevelopers
Foundations OverviewColorGridIconographyInteractionsSpacingTypography
Tokens Overview Global colorbox shadowTypographyborderopacityspacelengthIconBreakpointsMedia Queries
Elements All elements Accordion Alert Announcement Audio player Avatar Back to top Badge Blockquote Breadcrumb Button Card Chip Code block Call to action Dialog Disclosure Footer Health index Icon Jump links Navigation (primary) Navigation (secondary) Pagination PopoverPlanned Progress stepsPlanned Site status Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed
Theming OverviewColor PalettesCustomizingDevelopers
Patterns All PatternsCardTabsFilterFormLink with iconLogo wallSearch barSticky bannerSticky cardTile
Personalization All Personalization PatternsAnnouncement
Accessibility FundamentalsAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers
Design/code status Release notes Get support

Switch

OverviewStyleGuidelinesCodeAccessibilityDemos
StyleColor schemeConfigurationSpaceStatesStyleColor schemeConfigurationSpaceStates

Style

A Switch resembles a slider and includes a status message. When activated, the track background changes color and the handle changes position. If a user needs to toggle multiple Switches, they can be stacked on top of each other.

Anatomy

with numbers labeling the track, handle, and status message
  1. Track
  2. Handle
  3. Status message

Color scheme

A Switch is available for both light and dark color schemes.

Light theme switch with blue track, white handle, and black text Dark theme switch with light blue track, black handle, and white text

Configuration

A Switch is the same height as the status message and both are horizontally aligned as well.

Switch and status message are 24px tall. Switch is 40px wide. Horizontally aligned switch and status message

Status messages

A status message can be positioned to the right or left of a Switch.

One switch with status message on the left and another with status message on the right

Space

Space values remain the same at all viewport sizes.

16px spacer between the switch and status message 24px spacer between stacked switches with status messages

States

A Switch and the status message cx count as the same selectable object.

The visual appearance of a Switch does not change unless toggled.
Switches that are on, off, disabled, hovered, active, and in focus
  1. On
  2. On with check
  3. Off
  4. Disabled
  5. Hover
  6. Focus
  7. Active
Edit this page on GitHub
© 2021-2025 Red Hat, Inc. Deploys by Netlify