Switch - Electric UI

Switch allows for 2-state value selection, and will visualise other states with an indeterminate middle position.

Screenshot of component Switch unchecked

Screenshot of component Switch indeterminate

Usage

This checkbox will write {lamp: 1} if checked, and {lamp: 0} if unchecked. If the device state doesn't match either of these, it will display the indeterminate state.

import { Switch } from '@electricui/components-desktop-blueprint'
 
<Switch
  unchecked={0}
  checked={1}
  accessor={state => state.lamp}
  writer={(state, value) => {
    state.lamp = value
  }}
>
  Toggle Lamp State
</Switch>

Size

Use the large property to increase the size of the switch.

<Switch
  unchecked={0}
  checked={1}
  accessor={state => state.lamp}
  writer={(state, value) => {
    state.lamp = value
  }}
  large
>
  Large
</Switch>

State Labels

The component supports configurable inner strings based on the rendered switch position.

Screenshot of component Switch inner-label

<Switch
  unchecked={0}
  checked={1}
  accessor={state => state.lamp}
  writer={(state, value) => {
    state.lamp = value
  }}
  innerLabel="off"
  innerLabelChecked="on"
/>