Switch

Overview Style Guidelines Code Demos Accessibility
  1. Usage
  2. rh-switch
  1. Usage
  2. rh-switch

Installation

Learn more about how to install on our getting started docs.

Red Hat CDN 
<script type="module">
  import '@rhds/elements/rh-switch/rh-switch.js';
</script>
Import Map Example 
<script type="importmap">
  {
    "imports": {
      "@rhds/elements/": "https://www.redhatstatic.com/dx/v1-alpha/@rhds/elements@2.0.1/elements/",
    }
  }
</script>
 NPM 
npm install @rhds/elements
<script type="module">
  import '@rhds/elements/rh-switch/rh-switch.js';
</script>
 JSPM 
<script type="module">
  import '@rhds/elements/rh-switch/rh-switch.js';
</script>
Import Map Example 
<script type="importmap">
{
  "imports": {
    "@rhds/elements/rh-switch/rh-switch.js": "./elements/rh-switch/rh-switch.js"
  },
  "scopes": {
    "./": {
      "@patternfly/pfe-core/": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.2/",
      "@patternfly/pfe-core/ssr-shims.js": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.2/core.js",
      "@rhds/elements/rh-icon/rh-icon.js": "./elements/rh-icon/rh-icon.js",
      "@rhds/icons": "https://ga.jspm.io/npm:@rhds/icons@1.1.2/icons.js",
      "@rhds/tokens/css/color-context-consumer.css.js": "https://ga.jspm.io/npm:@rhds/tokens@2.1.0-next.15/css/color-context-consumer.css.js",
      "lit": "https://ga.jspm.io/npm:lit@3.2.0/index.js",
      "lit/": "https://ga.jspm.io/npm:lit@3.2.0/",
      "tslib": "https://ga.jspm.io/npm:tslib@2.7.0/tslib.es6.mjs"
    },
    "https://ga.jspm.io/": {
      "@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/controllers/property-observer-controller.js": "https://ga.jspm.io/npm:@patternfly/pfe-core@4.0.2/controllers/property-observer-controller.js",
      "lit": "https://ga.jspm.io/npm:lit@3.2.0/index.js",
      "lit-element/lit-element.js": "https://ga.jspm.io/npm:lit-element@4.1.0/development/lit-element.js",
      "lit-html": "https://ga.jspm.io/npm:lit-html@3.2.0/development/lit-html.js",
      "lit-html/": "https://ga.jspm.io/npm:lit-html@3.2.0/development/",
      "tslib": "https://ga.jspm.io/npm:tslib@2.7.0/tslib.es6.mjs"
    }
  }
}
</script>

Usage 

<rh-switch id="a" checked></rh-switch>
<label for="a">
  <span data-state="on">Message when on</span>
  <span data-state="off" hidden>Message when off</span>
</label>

rh-switch

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