Checkbox

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

Usage

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

PropTypeDefaultOptionalDescription
accessorAccessor

Accessor

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

<T>
No

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

checkedTNo

The checked value

uncheckedTNo

The checked value

writer(staging: Draft<ElectricUIDeveloperState

ElectricUIDeveloperState

>, value: T) => void
No

A writer to write the Checked state.

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