Switch

Components

Switch

Switch enables a user to quickly toggle between two states.

Switch is similar to a radio group in function but is used for quickly toggling between binary actions. Switch must always be accompanied by a label, and follows the same keyboard workflow as a checkbox.

Enable spike alerts?

import { Switch } from '@sproutsocial/racine'

() => {
  const [checked, setChecked] = useState(false)
  const toggle = () => setChecked(!checked)

  return (
    <Box display='flex' justifyContent='center' alignItems='center'>
      <Label htmlFor='spike-alerts'>
        Enable spike alerts?
      </Label>
        
      <Switch 
        id='spike-alerts' 
        checked={checked} 
        onClick={toggle} 
        ml={300}
      />
    </Box>
  )
}

() => {
  const [checked, setChecked] = useState(false)
  const toggle = () => setChecked(!checked)
  return (
    <Box display='flex' justifyContent='center' alignItems='center'>
      <Label htmlFor='spike-alerts'>
        Enable spike alerts?
      </Label>
        
      <Switch 
        id='spike-alerts' 
        checked={checked} 
        onClick={toggle} 
        ml={300}
      />
    </Box>
  )
}

Properties

System props

System props apply standard sets of properties to a component that can be used to alter its appearance on the fly.

COMMON

Learn more

Name	Type	Default	Description
`onClick`	`(e: SyntheticEvent<HTMLButtonElement>, checked: boolean) => void`
`checked`	`boolean`
`a11yLabels`	`{ on: String, off: String }`	`{ on: "on", off: "off" }`	Customizable object to pass in localized "On" and "Off" label text for screen readers {"on": ONTEXT, "off": OFFTEXT}
`disabled`	`boolean`	`false`	Disables interaction on component and applies disabled styles
`name`	`string`
`qa`	`Object`