@arterial/checkbox v3.0.0

Arterial Checkbox

Another React Material Checkbox

Installation

npm install @arterial/checkbox

Usage

Styles

Sass

@use "@material/checkbox/index.scss" as checkbox;
@include checkbox.core-styles;

CSS

import '@material/checkbox/dist/mdc.checkbox.css';

JSX

import {Checkbox} from '@arterial/checkbox';

Checked Checkbox

function Checked() {
  const [checked, setChecked] = useState(true);
  return (
    <Checkbox
      checked={checked}
      id="checkbox-checked"
      onChange={e => setChecked(e.target.checked)}
    />
  );
}

Unchecked Checkbox

function Unchecked() {
  const [checked, setChecked] = useState(false);
  return (
    <Checkbox
      checked={checked}
      id="checkbox-unchecked"
      onChange={e => setChecked(e.target.checked)}
    />
  );
}

Indeterminate Checkbox

function Indeterminate() {
  const [checked, setChecked] = useState(false);
  const [indeterminate, setIndeterminate] = useState(true);
  return (
    <Checkbox
      checked={checked}
      id="checkbox-indeterminate"
      indeterminate={indeterminate}
      onChange={e => {
        setChecked(e.target.checked);
        setIndeterminate(e.target.indeterminate);
      }}
    />
  );
}

Other Variants

Label

function Label() {
  const [checked, setChecked] = useState(true);
  return (
    <Checkbox
      checked={checked}
      id="checkbox-label"
      label="Checkbox"
      onChange={e => setChecked(e.target.checked)}
    />
  );
}

Align End

function AlignEnd() {
  const [checked, setChecked] = useState(true);
  return (
    <Checkbox
      alignEnd
      checked={checked}
      id="checkbox-align-end"
      label="Checkbox"
      onChange={e => setChecked(e.target.checked)}
    />
  );
}

Disabled

<Checkbox
  disabled
  id="checkbox-disabled"
  label="Checkbox"
  onChange={() => {}}
/>

Props

Checkbox