Switch

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

Screenshot of component Switch checked
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'
  1. <Switch
  2. unchecked={0}
  3. checked={1}
  4. accessor={state => state.lamp}
  5. writer={(state, value) => {
  6. state.lamp = value
  7. }}
  8. >
  9. Toggle Lamp State
  10. </Switch>

Size

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

Screenshot of component Switch size
  1. <Switch
  2. unchecked={0}
  3. checked={1}
  4. accessor={state => state.lamp}
  5. writer={(state, value) => {
  6. state.lamp = value
  7. }}
  8. >
  9. Large
  10. </Switch>

State Labels

The component supports configurable inner strings to help indicate the state of the switch.

Screenshot of component Switch inner-label
  1. <Switch
  2. unchecked={0}
  3. checked={1}
  4. accessor={state => state.lamp}
  5. writer={(state, value) => {
  6. state.lamp = value
  7. }}
  8. innerLabel="off"
  9. innerLabelChecked="on"
  10. />

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

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.

alignIndicatorAlignmentAlignment.LEFTYes

Alignment of the indicator within container.

childrenReactNodeYes

JSX label for the control.

classNamestringYes

A space-delimited list of class names to pass along to a child element.

disabledbooleanYes

Whether the control is non-interactive.

inlinebooleanYes

Whether the control should appear as an inline element.

innerLabelstringYes

Text to display inside the switch indicator when unchecked.

innerLabelCheckedstringinnerLabelYes

Text to display inside the switch indicator when checked. If innerLabel is provided and this prop is omitted, then innerLabel will be used for both states.

inputRef(ref: HTMLInputElement | null) => anyYes

Ref handler that receives HTML <input> element backing this component.

labelstringYes

Text label for the control.

Use children or labelElement to supply JSX content. This prop actually supports JSX elements, but TypeScript will throw an error because HTMLAttributes only allows strings.

labelElementReactNodeYes

JSX Element label for the control.

This prop is a workaround for TypeScript consumers as the type definition for label only accepts strings. JavaScript consumers can provide a JSX element directly to label.

largebooleanYes

Whether this control should use large styles.

tagNamekeyof IntrinsicElements

IntrinsicElements

"label"Yes

Name of the HTML tag that wraps the checkbox.

By default a <label> is used, which effectively enlarges the click target to include all of its children. Supply a different tag name if this behavior is undesirable or you're listening to click events from a parent element (as the label can register duplicate clicks).

writer(staging: Draft<ElectricUIDeveloperState

ElectricUIDeveloperState

>, value: any) => void
No

A writer to write the Checked state.

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