@arterial/switch v3.0.0

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