Checkbox

<Toggle initial={false}>
  {({ on, toggle }) => (
    <Checkbox name="checkbox" checked={on} onChange={toggle} />
  )}
</Toggle>

<Toggle initial={false}>
  {({ on, toggle }) => (
    <div>
      <Checkbox
        id="labelled-checkbox"
        name="checkbox"
        checked={on}
        onChange={toggle}
      />
      <FormLabel htmlFor="labelled-checkbox">My Checkbox</FormLabel>
    </div>
  )}
</Toggle>

<Toggle initial={false}>
  {({ on, toggle }) => (
    <div>
      <Checkbox
        error={true}
        id="errored-checkbox"
        name="checkbox"
        checked={on}
        onChange={toggle}
      />
      <FormLabel htmlFor="errored-checkbox">My Checkbox</FormLabel>
    </div>
  )}
</Toggle>

<Toggle initial={false}>
  {({ on, toggle }) => (
    <div>
      <Checkbox
        disabled
        id="disabled-checkbox"
        name="checkbox"
        checked={true}
        onChange={toggle}
      />
      <FormLabel htmlFor="disabled-checkbox">My Checkbox</FormLabel>
    </div>
  )}
</Toggle>