@elemental-ui-alpha/checkbox v0.0.2

Checkbox

import { Checkbox, CheckboxGroup, CheckboxPrimitive } from '@elemental-ui-alpha/checkbox';

Usage

Basic usage of checkbox.

<Checkbox defaultChecked>Uncontrolled</Checkbox>

Disabled

<Stack gap="medium">
  <Checkbox disabled>Disabled</Checkbox>
  <Checkbox checked disabled>
    Checked + Disabled
  </Checkbox>
</Stack>

Invalid

<Checkbox invalid checked={false}>
  Invalid
</Checkbox>

Multiline Labels and Markup

<div style={{ width: 300 }}>
  <Checkbox>
    <>
      Checkboxes can include <strong>bold text</strong> and{' '}
      <a href="">anchors</a> which may wrap onto multiple lines.
    </>
  </Checkbox>
</div>

Checkbox Group

It's recommended to use the checkbox group component, which normalizes the onChange and value behaviour.

Most of the time you'll only want the updated value, this is simplified by passing it back rather than the event. The original event is still available as the second argument if needed.

The checkbox group uses Stack under-the-hood so you can distribute each item along the X or Y axis, using the direction prop:

• vertical (default)
• horizontal

const [value, setValue] = React.useState([]);
const onChange = (val, event) => {
  setValue(val);
  console.log(event);
};

return (
  <CheckboxGroup
    direction="vertical"
    legend="checkbox group"
    onChange={onChange}
    value={value}
  >
    <Checkbox value="1">First</Checkbox>
    <Checkbox value="2">Second</Checkbox>
    <Checkbox value="3">Third</Checkbox>
  </CheckboxGroup>
);

Checkbox Primitive

For custom checkbox behaviours use the CheckboxPrimitive. This component isn't already wrapped in a label, allowing full control of semantics and layout.

const [checked, setChecked] = React.useState([]);
const onChange = event => {
  const item = event.target.value;

  if (checked.includes(item)) {
    setChecked(checked.filter(i => i !== item));
  } else {
    setChecked([...checked, item]);
  }
};

return (
  <Columns gap="small" collapse="large">
    {['First', 'Second', 'Third'].map(v => {
      const isChecked = checked.includes(v);
      const bg = isChecked ? 'shade' : null;

      return (
        <Flex
          align="center"
          as="label"
          background={bg}
          direction="horizontal"
          padding="small"
          rounding="small"
        >
          <CheckboxPrimitive
            key={v}
            value={v}
            checked={isChecked}
            onChange={onChange}
          />
          <Text marginLeft="small">{v}</Text>
        </Flex>
      );
    })}
  </Columns>
);