Toggle

Used to retrieve user input.

Props

label

stringLabel for the toggle

checked

booleanWhether the toggle is checked or not

onChange

functionCalled when checked state changes

disabled

booleanWhether the toggle is disabled or not

import * as React from "react";
import { Toggle } from "basics";

export default () => {
  const [checked, setChecked] = React.useState(true);
  return (
    <Toggle
      label="Wi-Fi"
      checked={checked}
      onChange={() => setChecked(!checked)}
    />
  );
}

import * as React from "react";
import { Toggle } from "basics";

export default () => {
  const [checked, setChecked] = React.useState(true);
  return (
    <Toggle
      label="Wi-Fi"
      checked={checked}
      onChange={() => setChecked(!checked)}
    />
  );
}

Showcase


<Flex direction="column" gap="16">
  <Toggle />
  <Toggle disabled />
  <Toggle defaultChecked />
  <Toggle checked disabled />
</Flex><Flex direction="column" gap="16">
  <Toggle />
  <Toggle disabled />
  <Toggle defaultChecked />
  <Toggle checked disabled />
</Flex>