Checkbox

import { Checkbox } from '@customerio/pluma-components/react';
import { useState } from 'react';

export default function Example() {
	const [isChecked, setIsChecked] = useState(false);

	return <Checkbox
		value="checkbox_value"
		label="Default checkbox"
		isChecked={isChecked}
		onCheckedChange={(checked) => {
			setIsChecked(checked);
		}}
	/>
}

<Checkbox
  value="enabled_checkbox"
  label="Enabled Checkbox"
  isChecked={true}
  onCheckedChange={() => {}}
/>

<Checkbox
  value="unchecked_checkbox"
  label="Unchecked checkbox"
  isChecked={false}
  onCheckedChange={() => {}}
/>

<Checkbox
  value="disabled_checkbox"
  label="Disabled checkbox"
  isChecked={false}
  isDisabled={true}
  onCheckedChange={() => {}}
/>

import { Checkbox, Box } from '@customerio/pluma-components/react';
import { useState } from 'react';

export default function Example() {
  const [checked, setChecked] = useState(false);

  return (
    <>
      <Box
        as="label"
        id="my_label_id"
        htmlFor="my_aria_checkbox"
      >
        Accept terms and conditions
      </Box>
      <Checkbox
        id="my_aria_checkbox"
        ariaLabelledby="my_label_id"
        isChecked={checked}
        onCheckedChange={(checked) => setChecked(checked)}
      />
    </>
  );
}

import { Checkbox, Box } from '@customerio/pluma-components/react';
import { useState } from 'react';

export default function Example() {
  const [checkboxItems, setCheckboxItems] = useState([
    { value: 'email', label: 'Email' },
    { value: 'inapp', label: 'In-app' },
    { value: 'sms', label: 'SMS' },
  ]);

  const [values, setValues] = useState(['inapp']);

  const onCheckedChange = (checked, e) => {
    const value = e.currentTarget.value;
    const currentState = values;
    console.log({value, checked, currentState});

    if (value === 'messaging_types') {
      if (checked) {
        setValues(checkboxItems.map((i) => i.value));
      } else {
        setValues([]);
      }
    } else {
      if (checked) {
        setValues([...currentState, value]);
      } else {
        setValues(currentState.filter((v) => v !== value));
      }
    }
  };

return (
  <>
    <Checkbox
      label="Messaging types"
      value="messaging_types"
      isChecked={values.length === checkboxItems.length}
      isIndeterminate={values.length > 0 && values.length < checkboxItems.length}
      onCheckedChange={onCheckedChange}
    />

    <Box display="flex" flexDirection="column" gap="100" mt="100" pl="200">
      {checkboxItems.map((item) => (
        <Checkbox
          key={item.value}
          label={item.label}
          value={item.value}
          isChecked={values.includes(item.value)}
          onCheckedChange={onCheckedChange}
        />
      ))}
    </Box>
    </>
  )
}

import { Checkbox, Icon } from '@customerio/pluma-components/react';
import { useState } from 'react';

export default function Example() {
  const [isChecked, setIsChecked] = useState(false);

  return <Checkbox
    label={<>Custom label <Icon name="campaigns" isInline={true} size="sm" /></>}
    isChecked={isChecked}
    onCheckedChange={(checked) => {
      setIsChecked(checked);
    }}
  />
}