Switch

A control that indicates whether a setting is on or off. Wrap it in a <label> for an accessible name. color sets the off wash and the on accent. There is no border.

Anatomy

<label>
  <UiSwitchRoot default-checked>
    <UiSwitchThumb />
  </UiSwitchRoot>
  Notifications
</label>

Parts

• Root — role="switch". checked / defaultChecked, disabled, readOnly. Space and Enter toggle. data-checked / data-unchecked.
• Thumb — slides with a short CSS transform. No animation library.