Checkboxes allow for two-state control over data on the device.

Displays an indeterminate state if the device doesn't match the checked or unchecked states.

Screenshot of component Checkbox checked

Screenshot of component Checkbox unchecked

Screenshot of component Checkbox indeterminate


This checkbox reads and writes state to the bright messageID. It will write 255 if checked, 0 if unchecked.

If the device state doesn't match either of these, it will display the indeterminate state [-].

import { Checkbox } from '@electricui/components-desktop-blueprint'
  1. <Checkbox
  2. accessor={state => state.bright}
  3. checked={255}
  4. unchecked={0}
  5. writer={(state, value) => {
  6. state.bright = value
  7. }}
  8. >
  9. Brightness
  10. </Checkbox>

Prop Reference



An Accessor may be:

  • A string that denotes the messageID
  • A function that takes the device's state tree and returns a value.

Functional accessors may take between one and two arguments, of the form (state: StateTree) => value or (state: StateTree, pushedState: StateTree) => value.

The first argument is the state committed to the UI only StateTree, the second argument is the acknowledged device level StateTree.

Type: FunctionalAccessor<T> | MessageID


Either a string that denotes the messageID or a function that takes the device's state tree and returns a string, number or boolean.


The checked value


The checked value

writer(staging: Draft<ElectricUIDeveloperState


>, value: T) => void

A writer to write the Checked state.

If the accessor is a MessageID string this isn't required.