@arterial/checkbox

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

Name	Type	Description
alignEnd	boolean	Aligns root element on the right side of the label.
checked	boolean	Indicates whether the element is checked.
className	string	Classes to be applied to the root element.
disabled	boolean	Indicates whether the element is disabled.
id	string	Id of the element.
indeterminate	bool	Indicates whether the checkbox is indeterminate.
label	string	Text to be displayed next to the root element.
onChange	function	Change event handler.
ripple	boolean	Enables ripple within root element. Defaults to true.
style	object	Styles to be applied to the root element.
value	string	Value of input.