Physical switch that allows users to turn things on or off. Used for applying system states, presenting binary options and activating a state.
import React, { useState } from 'react' import { Caption, Title, Toggle } from 'playbook-ui' const ToggleName = () => { const [choice, setChoice] = useState(false) const handleOnChange = ({ target }) => { setChoice(target.value = !choice) } return ( <> <Title size={4} text="Which of the following vehicles do you own?" /> <br /> <Caption text="Car" /> <Toggle checked={choice} size="sm" > <input name="vehicle" onChange={handleOnChange} type="checkbox" value="car" /> </Toggle> <br /> <Caption text="Bike" /> <Toggle checked={choice} size="sm" > <input name="vehicle" onChange={handleOnChange} type="checkbox" value="bike" /> </Toggle> </> ) } export default ToggleName
import React, { useState } from 'react' import { Toggle } from 'playbook-ui' const ToggleCustom = () => { const [choice, setChoice] = useState(false) const handleOnChange = ({ target }) => { setChoice(target.value = !choice) } return ( <> <Toggle checked={choice} size="sm" > <input className="my custom checkbox" name="custom checkbox" onChange={handleOnChange} type="checkbox" value="ABC" /> </Toggle> </> ) } export default ToggleCustom
import React, { useState } from 'react' import { Caption, Title, Toggle } from 'playbook-ui' const ToggleCustomRadio = () => { const [choice, setChoice] = useState('walk') const handleOnChange = ({ target }) => { setChoice(target.value) } return ( <> <Title size={4} text="Select one option:" /> <br /> <Caption text="Walk" /> <Toggle checked={choice} size="sm" > <input name="modes of transportation" onChange={handleOnChange} type="radio" value="walk" /> </Toggle> <br /> <Caption text="Bike" /> <Toggle size="sm" > <input name="modes of transportation" onChange={handleOnChange} type="radio" value="bike" /> </Toggle> <br /> <Caption text="Ride" /> <Toggle size="sm" > <input name="modes of transportation" onChange={handleOnChange} type="radio" value="ride" /> </Toggle> </> ) } export default ToggleCustomRadio
Avoid using if there is a selection with no action/execution that follows or if actions need to be confirmed before being applied.
Avoid using for opposing options (ie having an option on each side of toggle and the side that it is flipped to is the option that is selected).