Checkbox

Used to retrieve user input.

Props

label

stringLabel for the checkbox

checked

booleanWhether the checkbox is checked or not

onChange

functionCalled when checked state changes

disabled

booleanWhether the checkbox is disabled or not

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

export default () => {
  const [checked, setChecked] = React.useState(true);
  return (
    <Checkbox
      label="Remember me"
      checked={checked}
      onChange={() => setChecked(!checked)}
    />
  );
}

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

export default () => {
  const [checked, setChecked] = React.useState(true);
  return (
    <Checkbox
      label="Remember me"
      checked={checked}
      onChange={() => setChecked(!checked)}
    />
  );
}

Showcase


<Flex direction="column" gap="16">
  <Checkbox label="Checkbox label" />
  <Checkbox label="Checkbox label" disabled />
  <Checkbox label="Checkbox label" checked />
  <Checkbox label="Checkbox label" checked disabled />
</Flex><Flex direction="column" gap="16">
  <Checkbox label="Checkbox label" />
  <Checkbox label="Checkbox label" disabled />
  <Checkbox label="Checkbox label" checked />
  <Checkbox label="Checkbox label" checked disabled />
</Flex>