Switch

Switch displays a field that handles toggling between true or false.

Import

import { Switch } from "@prismane/core";

Usage

function Demo() {
  const [value, setValue] = useState(false);

  return <Switch value={value} onChange={(e) => setValue(e.target.checked)} />;
}

Switch Sizes

function Demo() {
  const [value, setValue] = useState(false);

  return (
    <Flex direction="column" gap={fr(2)}>
      <Switch
        size="xs"
        label="Default Field:"
        value={value}
        onChange={(e) => setValue(e.target.checked)}
      />
      <Switch
        size="sm"
        label="Default Field:"
        value={value}
        onChange={(e) => setValue(e.target.checked)}
      />
      <Switch
        size="base"
        label="Default Field:"
        value={value}
        onChange={(e) => setValue(e.target.checked)}
      />
      <Switch
        size="md"
        label="Default Field:"
        value={value}
        onChange={(e) => setValue(e.target.checked)}
      />
      <Switch
        size="lg"
        label="Default Field:"
        value={value}
        onChange={(e) => setValue(e.target.checked)}
      />
    </Flex>
  );
}

API

Please refer to the documentation below for a comprehensive overview of all the available props and classes for the mentioned components.

- Switch

Go BackStack

Up NextTable