ToggleSwitch

ToggleSwitch is used to select a boolean value.

Email address

Users can add email addresses to their account

Two-factor authentication

Require a verification code when signing in

preview

Usage#

import { ToggleSwitch } from '@primereact/ui/toggleswitch';

<ToggleSwitch.Root>
    <ToggleSwitch.Control>
        <ToggleSwitch.Thumb />
    </ToggleSwitch.Control>
</ToggleSwitch.Root>

Examples#

Basic#

Toggles a boolean setting between enabled and disabled states.

Off

basic-demo

import { ToggleSwitch } from '@primereact/ui/toggleswitch';

export default function BasicDemo() {
    return (
        <div className="flex justify-center items-center gap-2">
            <label htmlFor="switch">Off</label>
            <ToggleSwitch.Root inputId="switch">
                <ToggleSwitch.Control>
                    <ToggleSwitch.Thumb />
                </ToggleSwitch.Control>
            </ToggleSwitch.Root>
            <label htmlFor="switch">On</label>
        </div>
    );
}

Controlled#

A controlled ToggleSwitch requires managing the checked state with a state variable and handling the change event manually. This allows for complete control over the ToggleSwitch's behavior.

Airplane Mode

controlled-demo

'use client';
import { ToggleSwitchRootChangeEvent } from 'primereact/toggleswitch';
import { ToggleSwitch } from '@primereact/ui/toggleswitch';
import React from 'react';

export default function ControlledDemo() {
    const [checked, setChecked] = React.useState(true);

    return (
        <div className="flex justify-center items-center gap-2">
            <ToggleSwitch.Root inputId="mode" checked={checked} onCheckedChange={(event: ToggleSwitchRootChangeEvent) => setChecked(event.checked)}>
                <ToggleSwitch.Control>
                    <ToggleSwitch.Thumb />
                </ToggleSwitch.Control>
            </ToggleSwitch.Root>
            <label htmlFor="mode">Airplane Mode</label>
        </div>
    );
}

Uncontrolled#

For an uncontrolled ToggleSwitch component, defaultChecked is used to set the initial state, and the component manages its own state internally.

uncontrolled-demo

import { ToggleSwitch } from '@primereact/ui/toggleswitch';

export default function UncontrolledDemo() {
    return (
        <div className="flex justify-center">
            <ToggleSwitch.Root defaultChecked>
                <ToggleSwitch.Control>
                    <ToggleSwitch.Thumb />
                </ToggleSwitch.Control>
            </ToggleSwitch.Root>
        </div>
    );
}

Template#

ToggleSwitch.Thumb also allows displaying custom content inside itself.

template-demo

'use client';
import { Check } from '@primeicons/react/check';
import { Times } from '@primeicons/react/times';
import { ToggleSwitch, type ToggleSwitchThumbInstance } from '@primereact/ui/toggleswitch';

export default function TemplateDemo() {
    return (
        <div className="flex justify-center">
            <ToggleSwitch.Root>
                <ToggleSwitch.Control>
                    <ToggleSwitch.Thumb>
                        {(instance: ToggleSwitchThumbInstance) => {
                            const { toggleSwitch: toggleSwitchContext } = instance;

                            return <>{toggleSwitchContext?.state.checked ? <Check /> : <Times />}</>;
                        }}
                    </ToggleSwitch.Thumb>
                </ToggleSwitch.Control>
            </ToggleSwitch.Root>
        </div>
    );
}

Customization#

ToggleSwitch component supports customization through CSS classes. The appearance, including colors and other visual properties, can be modified by applying custom classes to the component.

Try Beta Features

Experience upcoming features before they're officially released.

customization-demo

'use client';
import { ToggleSwitchRootChangeEvent } from 'primereact/toggleswitch';
import { ToggleSwitch } from '@primereact/ui/toggleswitch';
import * as React from 'react';

export default function CustomizationDemo() {
    const [checked, setChecked] = React.useState(true);

    return (
        <div className="flex justify-center items-center gap-2">
            <label
                htmlFor="custom"
                className="flex items-center gap-2 bg-surface-50 hover:bg-surface-100 dark:bg-slate-700 hover:dark:bg-slate-800 p-4 rounded-md"
            >
                <div className="flex flex-col gap-1">
                    <p className="m-0 text-medium">Try Beta Features</p>
                    <p className="m-0 text-sm text-slate-400">Experience upcoming features before they&apos;re officially released.</p>
                </div>

                <ToggleSwitch.Root inputId="custom" checked={checked} onCheckedChange={(event: ToggleSwitchRootChangeEvent) => setChecked(event.checked)}>
                    <ToggleSwitch.Control className={`${checked ? 'bg-blue-300' : 'bg-surface-300 dark:bg-surface-500'} rounded-md`}>
                        <ToggleSwitch.Thumb className="bg-blue-900" />
                    </ToggleSwitch.Control>
                </ToggleSwitch.Root>
            </label>
        </div>
    );
}

Invalid#

Invalid state is displayed using the invalid prop to indicate a failed validation. This style is useful when integrating with form validation libraries.

invalid-demo

'use client';
import { ToggleSwitchRootChangeEvent } from 'primereact/toggleswitch';
import { ToggleSwitch } from '@primereact/ui/toggleswitch';
import * as React from 'react';

export default function InvalidDemo() {
    const [checked, setChecked] = React.useState(false);

    return (
        <div className="flex justify-center">
            <ToggleSwitch.Root checked={checked} onCheckedChange={(event: ToggleSwitchRootChangeEvent) => setChecked(event.checked)} invalid={!checked}>
                <ToggleSwitch.Control>
                    <ToggleSwitch.Thumb />
                </ToggleSwitch.Control>
            </ToggleSwitch.Root>
        </div>
    );
}

Disabled#

When disabled is present, the element cannot be edited and focused.

disabled-demo

import { ToggleSwitch } from '@primereact/ui/toggleswitch';

export default function DisabledDemo() {
    return (
        <div className="flex justify-center">
            <ToggleSwitch.Root disabled>
                <ToggleSwitch.Control>
                    <ToggleSwitch.Thumb />
                </ToggleSwitch.Control>
            </ToggleSwitch.Root>
        </div>
    );
}

API#

Sub-Components#

See ToggleSwitch Primitive for the full sub-component API.

Hooks#

See useToggleSwitch for the headless hook API.

Accessibility#

See ToggleSwitch Primitive for WAI-ARIA compliance details and keyboard support.