Switch

The <Switch /> component behaves almost identically to <Checkbox /> and can be clearer indicator of settings that can be toggled.

import { Switch } from 'minerva-ui';


() => {
  const [checked, setChecked] = useState(false);
  return (
    <Switch
      htmlFor="example1"
      checked={checked}
      onChange={() => setChecked(!checked)}
    />
  );
};
() => {
  const [checked, setChecked] = useState(false);
  return (
    <Switch
      htmlFor="example1"
      checked={checked}
      onChange={() => setChecked(!checked)}
    />
  );
};

Switch with size variant


() => {
  const [checked, setChecked] = useState(false);
  return (
    <>
      <Switch
        switchSize="lg"
        htmlFor="example2"
        checked={checked}
        onChange={() => setChecked(!checked)}
      />
    </>
  );
};
() => {
  const [checked, setChecked] = useState(false);
  return (
    <>
      <Switch
        switchSize="lg"
        htmlFor="example2"
        checked={checked}
        onChange={() => setChecked(!checked)}
      />
    </>
  );
};

Switch with size and color variant


() => {
  const [checked, setChecked] = useState(false);
  return (
    <>
      <Switch
        switchSize="sm"
        switchColor="#66ff00"
        htmlFor="example3"
        checked={checked}
        onChange={() => setChecked(!checked)}
      />
    </>
  );
};
() => {
  const [checked, setChecked] = useState(false);
  return (
    <>
      <Switch
        switchSize="sm"
        switchColor="#66ff00"
        htmlFor="example3"
        checked={checked}
        onChange={() => setChecked(!checked)}
      />
    </>
  );
};

Props

These are props related to the Switch component.

Name	Type	Is Required	Default	Description
`disabled`	string	optional	10px	Space between items in stack
`switchSize`	'sm', 'md', 'lg'	optional	md	Size of switch
`switchColor`	string	optional	#5850ec	Color of inner switch when selected
`checked`	boolean	optional	false	Sets if switch is selected
`htmlFor`	string	required	none	Sets label of switch
`onChange`	function	optional	none	Action to take when state of switch changes
`style`	style props	optional	none	CSS style props

Switch

Switch with size variant#

Switch with size and color variant#

Props#

Switch with size variant

Switch with size and color variant

Props