# give/4.18.0/src/Views/Components/ListTable/ToggleSwitch/index.tsx

GiveWP – Donation Plugin and Fundraising Platform, version 4.18.0. 34 lines.

- Page: https://pluginprobe.com/plugins/give/4.18.0/code/src/Views/Components/ListTable/ToggleSwitch/index.tsx
- Raw: https://pluginprobe.com/plugins/give/4.18.0/raw/src/Views/Components/ListTable/ToggleSwitch/index.tsx
- Modified: 2025-10-01T11:37:12+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/give/4.18.0/code/src/Views/Components/ListTable/ToggleSwitch/index.tsx#L10-L20`.

```tsx
import styles from './style.module.scss';
import cx from 'classnames';

interface ToggleSwitchProps {
    onChange: (checked: boolean) => void;
    checked: boolean;
    ariaLabel?: string;
}

/**
 * @since 4.10.0 Remove checkbox to control state visibility.
 * @since 2.24.0
 */
const ToggleSwitch = ({ariaLabel, checked, onChange}: ToggleSwitchProps) => {
    const handleChange = () => {
        onChange(!checked);
    };

    return (
        <button
            className={styles.container}
            onClick={handleChange}
            role="switch"
            aria-checked={checked}
            aria-label={ariaLabel}
        >
            <span className={cx(styles.switch, { [styles.checked]: checked })} />
            {ariaLabel && <span>{ariaLabel}</span>}
        </button>
    );
};

export default ToggleSwitch;

```