Skip to main content Red Hat Design System logo Contribute on Github v2.0.0 Home
About About the design systemHow we buildRoadmap
Get started OverviewDesignersDevelopers
Foundations OverviewColorGridPersonalization patternsSpacingTypography
Tokens Overview Global colorBox shadowTypographyBorderOpacitySpaceLengthIconBreakpointsMedia queries
Elements All elements Accordion Alert Audio player Avatar Back to top Badge Blockquote Breadcrumb Button Call to action Card Code block Dialog Footer Health index Icon Navigation (primary)Planned Navigation (secondary) Pagination PopoverPlanned Progress stepsPlanned Site status Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed
Patterns All patternsAnnouncementCardDisclosureFilterFormLinkLink with iconLogo wallSearch barSkip navigationSticky bannerSticky cardTabsTileVideo thumbnail
Accessibility FundamentalsContentDesignDevelopmentContributorsQa and testingAssistive technologiesResources
Design/code status Release notes Get support

Switch

Overview Style Guidelines Code Demos Accessibility
  1. Style
  2. Theme
  3. Configuration
  4. Space
  5. States
  1. Style
  2. Theme
  3. Configuration
  4. Space
  5. States

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

Theme

A Switch is available in both light and dark themes.

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
© 2021-2024 Red Hat, Inc. Deploys by Netlify