Switch

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

Installation

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 0

None

 Attributes 8
DOM Property Description Type Default
label 
string | undefined

unknown
showCheckIcon 
boolean

false
checked 
boolean

false
disabled 
boolean

false
accessibleLabel 
string | undefined

unknown
messageOn 
string | undefined

unknown
messageOff 
string | undefined

unknown
reversed 
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 19

Token Copy
--rh-border-radius-pill
--rh-border-width-md
--rh-box-shadow-sm
--rh-color-accent-base-on-dark
--rh-color-accent-base-on-light
--rh-color-border-interactive-on-dark
--rh-color-border-interactive-on-light
--rh-color-gray-30
--rh-color-gray-40
--rh-color-gray-50
--rh-color-gray-60
--rh-color-icon-secondary-on-dark
--rh-color-surface-dark-alt
--rh-color-surface-lightest
--rh-color-text-secondary-on-dark
--rh-color-text-secondary-on-light
--rh-font-size-body-text-xs
--rh-space-lg
--rh-space-sm