Switch

OverviewStyleGuidelinesCodeAccessibilityDemos
  1. Installation
  2. Usage
  1. Installation
  2. Usage

Installation

We recommend import maps when building pages with RHDS. Learn more about how to install on our getting started docs.

Red Hat CDN 
<script type="importmap">
{
  "imports": {
    "@rhds/elements/": "https://www.redhatstatic.com/dx/v1-alpha/@rhds/elements@2.1.1/elements/",
  }
}
</script>
Copy to Clipboard Wrap lines NPM 
npm install @rhds/elements
Copy to Clipboard Wrap lines JSPM 
<script type="importmap">
{
  "imports": {
    "@rhds/elements/rh-switch/rh-switch.js": "https://ga.jspm.io/npm:@rhds/elements@2.1.1/rh-switch/rh-switch.js"
  },
  "scopes": {
    "https://ga.jspm.io/": {
      "@floating-ui/core": "https://ga.jspm.io/npm:@floating-ui/core@1.6.8/dist/floating-ui.core.mjs",
      "@floating-ui/dom": "https://ga.jspm.io/npm:@floating-ui/dom@1.6.12/dist/floating-ui.dom.mjs",
      "@floating-ui/utils": "https://ga.jspm.io/npm:@floating-ui/utils@0.2.8/dist/floating-ui.utils.mjs",
      "@floating-ui/utils/dom": "https://ga.jspm.io/npm:@floating-ui/utils@0.2.8/dist/floating-ui.utils.dom.mjs",
      "@lit/context": "https://ga.jspm.io/npm:@lit/context@1.1.3/development/index.js",
      "@lit/reactive-element": "https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/development/reactive-element.js",
      "@lit/reactive-element/decorators/": "https://ga.jspm.io/npm:@lit/reactive-element@2.0.4/development/decorators/",
      "@patternfly/pfe-core": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.4/core.js",
      "@patternfly/pfe-core/": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.4/",
      "@patternfly/pfe-core/ssr-shims.js": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.4/core.js",
      "@rhds/elements/lib/": "https://ga.jspm.io/npm:@rhds/elements@2.1.1/lib/",
      "@rhds/elements/": "https://ga.jspm.io/npm:@rhds/elements@2.1.1/elements/",
      "@rhds/icons": "https://ga.jspm.io/npm:@rhds/icons@1.1.2/icons.js",
      "@rhds/icons/ui/": "https://ga.jspm.io/npm:@rhds/icons@1.1.2/ui/",
      "@rhds/tokens/css/": "https://ga.jspm.io/npm:@rhds/tokens@2.1.0/css/",
      "@rhds/tokens/media.js": "https://ga.jspm.io/npm:@rhds/tokens@2.1.0/js/media.js",
      "lit": "https://ga.jspm.io/npm:lit@3.2.1/index.js",
      "lit-element/lit-element.js": "https://ga.jspm.io/npm:lit-element@4.1.1/development/lit-element.js",
      "lit-html": "https://ga.jspm.io/npm:lit-html@3.2.1/development/lit-html.js",
      "lit-html/": "https://ga.jspm.io/npm:lit-html@3.2.1/development/",
      "lit/": "https://ga.jspm.io/npm:lit@3.2.1/",
      "prism-esm": "https://ga.jspm.io/npm:prism-esm@1.29.0-fix.6/prism.js",
      "prism-esm/components/": "https://ga.jspm.io/npm:prism-esm@1.29.0-fix.6/components/",
      "tslib": "https://ga.jspm.io/npm:tslib@2.8.1/tslib.es6.mjs"
    }
  }
}
</script>
Copy to Clipboard Wrap lines

Add it to your page with this import statement

<script type="module">
  import '@rhds/elements/rh-switch/rh-switch.js';
</script>
Copy to Clipboard Wrap lines

Usage

<rh-switch id="switch-a"
           accessible-label="Switch A"
           message-on="Message when on"
           message-off="Message when off"
           checked></rh-switch>

<script type="module">
  import '@rhds/elements/rh-switch/rh-switch.js';
</script>

<style>
  rh-switch {
    margin: var(--rh-space-lg);
  }
</style>
Copy to Clipboard Wrap lines

rh-switch

A switch toggles the state of a setting (between on and off). Switches and checkboxes can often be used interchangeably, but the switch provides a more explicit, visible representation on a setting.

Slots 2
Slot Name Description
message-on

message content when checked. Overrides the message-on attribute.
message-off

message content when unchecked. Overrides the message-off attribute.
Attributes 7
Attribute DOM Property Description Type Default
accessible-label accessibleLabel

invisible, accessible label for screen readers

 
string | undefined
 
unknown
message-on messageOn

Message to display when the switch is on (i.e. checked)

 
string | undefined
 
unknown
message-off messageOff

Message to display when the switch is off (i.e. unchecked)

 
string | undefined
 
unknown
show-check-icon showCheckIcon

If the checkmark icon should be displayed when the switch is on

 
boolean
 
false
checked checked

If the switch is on

 
boolean
 
false
disabled disabled

If the switch is disabled

 
boolean
 
false
reversed reversed

If the switch is reversed: message first, then control

 
boolean
 
false
Methods 1
Method Name Description
formDisabledCallback(disabled: boolean)
Events 1
Event Name Description
change
CSS Shadow Parts 0
None
CSS Custom Properties 3
CSS Property Description Default
--rh-switch-unchecked

The background color of the switch when it is unchecked.

 —
--rh-switch-checked

The background color of the switch when it is checked.

 —
--rh-switch-disabled

The background color of the switch when it is disabled.

 —
Design Tokens 15
Token Copy
--rh-border-radius-pill
--rh-border-width-md
--rh-box-shadow-sm
--rh-color-accent-base
--rh-color-border-interactive
--rh-color-gray-30
--rh-color-gray-40
--rh-color-gray-50
--rh-color-gray-60
--rh-color-surface-dark-alt
--rh-color-surface-lightest
--rh-color-text-primary
--rh-color-text-secondary
--rh-space-lg
--rh-space-sm
Edit this page on GitHub