Toggle

const [s1, setS1] = useState(false);
const [s2, setS2] = useState(true);
const [s3, setS3] = useState(false);
const [s4, setS4] = useState(true);
const [s5, setS5] = useState(false);
const [s6, setS6] = useState(true);
return (
  <Stack gap="xxlarge" width={600}>
    <Columns gap="large">
      <div></div>
      <Text size="xsmall" weight="bold" color="muted">
        Unchecked
      </Text>
      <Text size="xsmall" weight="bold" color="muted">
        Checked
      </Text>
    </Columns>
    <Stack gap="small">
      <Columns gap="large" alignY="center">
        <Text size="xsmall" weight="bold" color="muted">
          Enabled
        </Text>
        <Toggle checked={s1} onChange={setS1} />
        <Toggle checked={s2} onChange={setS2} />
      </Columns>
    </Stack>
    <Stack gap="small">
      <Columns gap="large" alignY="center">
        <Text size="xsmall" weight="bold" color="muted">
          Disabled
        </Text>
        <Toggle checked={s3} onChange={setS3} disabled />
        <Toggle checked={s4} onChange={setS4} disabled />
      </Columns>
    </Stack>
    <Stack gap="small">
      <Columns gap="large" alignY="center">
        <Text size="xsmall" weight="bold" color="muted">
          Read only
        </Text>
        <Toggle checked={s5} onChange={setS5} readOnly />
        <Toggle checked={s6} onChange={setS6} readOnly />
      </Columns>
    </Stack>
    <Divider />
    <Columns gap="large">
      <div></div>
      <Text size="xsmall" weight="bold" color="muted">
        Small Unchecked
      </Text>
      <Text size="xsmall" weight="bold" color="muted">
        Small Checked
      </Text>
    </Columns>
    <Stack gap="small">
      <Columns gap="large" alignY="center">
        <Text size="xsmall" weight="bold" color="muted">
          Small Enabled
        </Text>
        <Toggle size="small" checked={s1} onChange={setS1} />
        <Toggle size="small" checked={s2} onChange={setS2} />
      </Columns>
    </Stack>
    <Stack gap="small">
      <Columns gap="large" alignY="center">
        <Text size="xsmall" weight="bold" color="muted">
          Small Disabled
        </Text>
        <Toggle size="small" checked={s3} onChange={setS3} disabled />
        <Toggle size="small" checked={s4} onChange={setS4} disabled />
      </Columns>
    </Stack>
    <Stack gap="small">
      <Columns gap="large" alignY="center">
        <Text size="xsmall" weight="bold" color="muted">
          Small Read only
        </Text>
        <Toggle size="small" checked={s5} onChange={setS5} readOnly />
        <Toggle size="small" checked={s6} onChange={setS6} readOnly />
      </Columns>
    </Stack>
  </Stack>
);

let [checked, setChecked] = useState(false);
const id = 'demo-toggle';
return (
  <Stack gap="small">
    <FieldLabel htmlFor={id}>Toggle label</FieldLabel>
    <Toggle id={id} checked={checked} onChange={setChecked} />
  </Stack>
);

<Stack gap="small">
  <FieldLabel>Share my details</FieldLabel>
  <Toggle a11yText={{ on: 'Yes', off: 'No' }} />
</Stack>