@arterial/switch

Arterial Switch

Another React Material Switch

Installation

npm install @arterial/switch

Usage

Styles

Sass

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

CSS

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

JSX

import {Switch} from '@arterial/switch';

Checked Switch

function Checked() {
  const [checked, setChecked] = useState(true);
  return (
    <Switch
      checked={checked}
      id="switch-checked"
      onChange={() => setChecked(!checked)}
    />
  );
}

Unchecked Switch

function Unchecked() {
  const [checked, setChecked] = useState(false);
  return (
    <Switch
      checked={checked}
      id="switch-unchecked"
      onChange={() => setChecked(!checked)}
    />
  );
}

Other Variants

Label

function Label() {
  const [checked, setChecked] = useState(false);
  return (
    <Switch
      checked={checked}
      id="switch-label"
      label="Switch"
      onChange={() => setChecked(!checked)}
    />
  );
}

Align End

function AlignEnd() {
  const [checked, setChecked] = useState(true);
  return (
    <Switch
      alignEnd
      checked={checked}
      id="switch-align-end"
      label="Switch"
      onChange={() => setChecked(!checked)}
    />
  );
}

Disabled

function Disabled() {
  const [checked, setChecked] = useState(true);
  return (
    <Switch
      checked={checked}
      disabled
      id="switch-disabled"
      label="Switch"
      onChange={() => setChecked(!checked)}
    />
  );
}

Props

Switch

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.
label	string	Text to be displayed next to the root element.
onChange	function	Change event handler.
style	object	Styles to be applied to the root element.
value	string	Value of input.