Toggle

Toggle switches are often used for settings or to show and hide UI. They utilize a slide animation to indicate switching between two opposing options.

Please note that toggle is an appearance of Camp’s checkbox component.

Overview

Set the appearance to toggle in the live demo below.

Resources

Install


yarn add @activecampaign/camp-components-checkbox

Usage

Pineapple


import Checkbox from '@activecampaign/camp-components-checkbox';
 
export default function () {
    const [ checked, setChecked ] = useState(false)
 
    return (
        <Checkbox
        appearance='toggle'
        checked={checked}
        onChange={handleChange}
        label="Pineapple"
        value="piña"
        />
    );
 
    function handleChange() {
        setChecked(!checked)
    }
}