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'

Preview

Source

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

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

Switch with size variant

Preview

Source

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

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

Switch with size and color variant

Preview

Source

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

() => {
  const [checked, setChecked] = React.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