Toggle v0.5.1 · @behivetech

Examples of v0.5.1 are shown as code; only the latest version runs live. Open the live examples →

Basic Toggle

1const BasicToggle = () => {
2  const [checked, setChecked] = useState(false);
3  return <Toggle checked={checked} onCheckedChange={setChecked} />;
4};
5
6render(<BasicToggle />);

Toggle With Form Field

1const ToggleWithFormField = () => {
2  const [checked, setChecked] = useState(false);
3  return (
4    <FormField
5      label="Dark mode"
6      htmlFor="dark-mode"
7      hint="Switch between light and dark color themes"
8    >
9      <Toggle id="dark-mode" checked={checked} onCheckedChange={setChecked} />
10    </FormField>
11  );
12};
13
14render(<ToggleWithFormField />);

Toggle With Error

1const ToggleWithError = () => (
2  <FormField
3    label="Required setting"
4    htmlFor="required-setting"
5    error="This setting must be enabled"
6  >
7    <Toggle
8      id="required-setting"
9      invalid
10      checked={false}
11      onCheckedChange={() => {}}
12    />
13  </FormField>
14);
15
16render(<ToggleWithError />);

Disabled Toggle

1const DisabledToggle = () => (
2  <Toggle disabled checked={false} onCheckedChange={() => {}} />
3);
4
5render(<DisabledToggle />);