Checkbox

Used in forms when a user needs to select multiple values from several options.

Input for choosing from a set of predefined options. Can be used alone for a binary choice (checked/unchecked), or in a group for selecting multiple values from a list of options (see Checkbox Group). Built with Chakra UI Checkbox.

To use Checkbox as a form element, with labels, validation etc, wrap it within a Form Control (see FormControl docs for examples).

Base example

import { Checkbox, type CheckboxCheckedChangeDetails } from "@caspeco/casper-ui-library";

export default function Demo() {
  function handleCheckedChange({ checked }: CheckboxCheckedChangeDetails) {
    console.log("Checked:", checked);
  }

  return <Checkbox onCheckedChange={handleCheckedChange}>Check me</Checkbox>;
}

Custom layout

import { Checkbox, Stack, Text } from "@caspeco/casper-ui-library";

export default function Demo() {
  return (
    <Stack spacing="24px">
      <Checkbox display="flex" justifyContent="flex-start" flexDirection="row-reverse">
        Row reverse
      </Checkbox>
      <Checkbox flexDirection="column">
        <Text align="center">Column</Text>
      </Checkbox>
      <Checkbox flexDirection="column-reverse">
        <Text align="center">Column reverse</Text>
      </Checkbox>
    </Stack>
  );
}