switch

import { Switch } from "woly";

Switch is used to choose between two different options.

Example

<Playground direction="horizontal">
  <State initial={false} change={(i) => !i}>
    {(value, change) => (
      <Switch id="unchecked" checked={value} onChange={change} priority="primary" />
    )}
  </State>
  <State initial={true} change={(i) => !i}>
    {(value, change) => (
      <Switch id="checked" checked={value} onChange={change} priority="primary" />
    )}
  </State>
  <State initial={false} change={(i) => !i}>
    {(value, change) => (
      <Switch
        id="disabled-unchecked"
        checked={value}
        onChange={change}
        priority="primary"
        disabled
      />
    )}
  </State>
  <State initial={true} change={(i) => !i}>
    {(value, change) => (
      <Switch id="disabled-checked" checked={value} onChange={change} priority="primary" disabled />
    )}
  </State>
</Playground>

Switch with Label

<Playground>
  <State initial={false} change={(i) => !i}>
    {(value, change) => (
      <div
        style={{
          display: 'flex',
          alignItems: 'center',
          padding: '30px',
          background: value ? 'black' : 'white',
        }}
      >
        <Label style={{ paddingRight: '20px' }} priority={value ? 'primary' : 'secondary'}>
          Dark mode
        </Label>
        <Switch id="set-mode" checked={value} onChange={change} priority="primary" />
      </div>
    )}
  </State>
</Playground>

Priorities

Error priority focus attention user on error

<Playground direction="horizontal">
  <State initial={false} change={(i) => !i}>
    {(value, change) => (
      <Switch id="unchecked" checked={value} onChange={change} priority="danger" />
    )}
  </State>
</Playground>

Kinds

NameDescription
SwitchBase switch. Useful for creating a new kind of switch

Props

NameTypeDefaultDescription
checkedbooleanWhether switch is checked or not
disabledbooleanDisable switch
idstringHTML id attribute
onChangeReact.ChangeEventHandler<HTMLInputElement>Callback when switch is clicked
prioritystring'secondary'Priority prop to style Switch component
...HTMLInputElement{}Other props are inherited from HTMLInputElement