Documentation
Components
Toggle

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

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

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

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

Sizes

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

NameTypeDefaultRequiredDescriptionAccepted values
checkedboolean--The current state of the toggle (checked or not).-
disabledboolean--The current status of the toggle (disabled or not).-
onChange(e: React.ChangeEvent<HTMLInputElement>) => void--The change event handler.-
largeboolean--The size of the toggle (large or not).-
Last updated on
ToastTooltip