openreplay/frontend/app/components/ui/Toggler/Toggler.js

import React from 'react';
import styles from './toggler.module.css';

export default ({ onChange, name, className = '', checked, label = '', plain = false }) => (
    <div className={className + ' w-fit'}>
        <label className={styles.label}>
            <div className={plain ? styles.switchPlain : styles.switch}>
                <input type={styles.checkbox} onClick={onChange} name={name} defaultChecked={checked} />
                <span className={`${plain ? styles.sliderPlain : styles.slider} ${checked ? styles.checked : ''}`} />
            </div>
            {label && <span>{label}</span>}
        </label>
    </div>
);