Toggle

Toggles allow the user to make a binary choice. (e.g. ON or OFF)

Props

className

String

disabled

Bool

false

forwardedRef

Custom

name

String

required

onChange

Func

required

value

Bool

false

Examples

Basic Toggle

The default usage passes in a boolean as the value prop and a callback for the onChange prop

<State initial={{ state: false }}>
  {({ state, setState }) => (
    <Toggle
      name="myToggle"
      onChange={(name, value) => setState({ value })}
      value={state.value}
    />
  )}
</State><State initial={{ state: false }}>
  {({ state, setState }) => (
    <Toggle
      name="myToggle"
      onChange={(name, value) => setState({ value })}
      value={state.value}
    />
  )}
</State>

Toggle

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Props

Examples

Basic Toggle

Props