Toggle

Displays a boolean value.

Usage

First of all, you need to import the Toggle component from the kitchn package.

import { Toggle } from "kitchn"

Default

() => {
  const [checked, toggle] = useCheckbox();
  const [checked2, toggle2] = useCheckbox(true);
  return (
    <Container gap={10}>
      <Container>
        <Toggle checked={checked} onChange={toggle} />
      </Container>

      <Container>
        <Toggle checked={checked2} onChange={toggle2} />
      </Container>
    </Container>
  );
}

↓Code Editor

() => {
  const [checked, toggle] = useCheckbox();
  const [checked2, toggle2] = useCheckbox(true);
  return (
    <Container gap={10}>
      <Container>
        <Toggle checked={checked} onChange={toggle} />
      </Container>

      <Container>
        <Toggle checked={checked2} onChange={toggle2} />
      </Container>
    </Container>
  );
}

Disabled

<Container gap={10}>
  <Container>
    <Toggle disabled />
  </Container>

  <Container>
    <Toggle disabled checked />
  </Container>
</Container>

↓Code Editor

<Container gap={10}>
  <Container>
    <Toggle disabled />
  </Container>

  <Container>
    <Toggle disabled checked />
  </Container>
</Container>

Sizes

() => {
  const [checked, toggle] = useCheckbox();
  const [checked2, toggle2] = useCheckbox();
  return (
    <Container row>
      <Container>
        <Toggle checked={checked} onChange={toggle} />
      </Container>

      <Container>
        <Toggle large checked={checked2} onChange={toggle2} />
      </Container>
    </Container>
  );
}

↓Code Editor

() => {
  const [checked, toggle] = useCheckbox();
  const [checked2, toggle2] = useCheckbox();
  return (
    <Container row>
      <Container>
        <Toggle checked={checked} onChange={toggle} />
      </Container>

      <Container>
        <Toggle large checked={checked2} onChange={toggle2} />
      </Container>
    </Container>
  );
}

Props

Name	Type	Default	Required	Description	Accepted values
`checked`	`boolean`	-	-	The current state of the toggle (checked or not).	-
`disabled`	`boolean`	-	-	The current status of the toggle (disabled or not).	-
`onChange`	`(e: React.ChangeEvent<HTMLInputElement>) => void`	-	-	The change event handler.	-
`large`	`boolean`	-	-	The size of the toggle (large or not).	-

Toast Tooltip