Switch

Switch is used to select a boolean value.

Usage#

import { Switch } from 'primereact/switch';
<Switch>
    <Switch.Control>
        <Switch.Thumb />
    </Switch.Control>
</Switch>

Examples#

Basic#

Switch demonstrates the standard implementation with checkbox functionality. It provides a simple on/off toggle that responds to user interaction with animated visual feedback.

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

Controlled#

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

import { SwitchChangeEvent } from '@primereact/types/shared/switch';
import { Switch } from 'primereact/switch';
import React from 'react';
 
export default function ControlledDemo() {
    const [checked, setChecked] = React.useState(true);
 
    return (
        <div className="card flex justify-center items-center gap-2">
            <Switch inputId="mode" checked={checked} onCheckedChange={(event: SwitchChangeEvent) => setChecked(event.checked)}>
                <Switch.Control>
                    <Switch.Thumb />
                </Switch.Control>
            </Switch>
            <label htmlFor="mode">Airplane Mode</label>
        </div>
    );
}

Uncontrolled#

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

import { Switch } from 'primereact/switch';
 
export default function UncontrolledDemo() {
    return (
        <div className="card flex justify-center">
            <Switch defaultChecked>
                <Switch.Control>
                    <Switch.Thumb />
                </Switch.Control>
            </Switch>
        </div>
    );
}

Template#

Switch.Thumb also allows displaying custom content inside itself.

import { CheckIcon, TimesIcon } from '@primereact/icons';
import type { SwitchThumbInstance } from '@primereact/types/shared/switch';
import { Switch } from 'primereact/switch';
 
export default function TemplateDemo() {
    return (
        <div className="card flex justify-center">
            <Switch>
                <Switch.Control>
                    <Switch.Thumb>
                        {(instance: SwitchThumbInstance) => {
                            const { switch: switchContext } = instance;
 
                            return <>{switchContext?.state.checked ? <CheckIcon /> : <TimesIcon />}</>;
                        }}
                    </Switch.Thumb>
                </Switch.Control>
            </Switch>
        </div>
    );
}

Customization#

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

import { SwitchChangeEvent } from '@primereact/types/shared/switch';
import { Switch } from 'primereact/switch';
import * as React from 'react';
 
export default function CustomizationDemo() {
    const [checked, setChecked] = React.useState(true);
 
    return (
        <div className="card 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>
 
                <Switch inputId="custom" checked={checked} onCheckedChange={(event: SwitchChangeEvent) => setChecked(event.checked)}>
                    <Switch.Control className={`${checked ? 'bg-blue-300' : 'bg-surface-300 dark:bg-surface-500'} rounded-md`}>
                        <Switch.Thumb className="bg-blue-900" />
                    </Switch.Control>
                </Switch>
            </label>
        </div>
    );
}

Invalid#

Invalid state is displayed using the invalid prop to indicate a failed validation. You can use this style when integrating with form validation libraries.

import { SwitchChangeEvent } from '@primereact/types/shared/switch';
import { Switch } from 'primereact/switch';
import * as React from 'react';
 
export default function InvalidDemo() {
    const [checked, setChecked] = React.useState(false);
 
    return (
        <div className="card flex justify-center ">
            <Switch checked={checked} onCheckedChange={(event: SwitchChangeEvent) => setChecked(event.checked)} invalid={!checked}>
                <Switch.Control>
                    <Switch.Thumb />
                </Switch.Control>
            </Switch>
        </div>
    );
}

Disabled#

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

import { Switch } from 'primereact/switch';
 
export default function DisabledDemo() {
    return (
        <div className="card flex justify-center">
            <Switch disabled>
                <Switch.Control>
                    <Switch.Thumb />
                </Switch.Control>
            </Switch>
        </div>
    );
}

Accessibility#

Screen Reader#

Switch component uses a hidden native checkbox element with switch role internally that is only visible to screen readers. Value to describe the component can either be provided via label tag combined with id prop or using aria-labelledby, aria-label props.

<label htmlFor="switch1">Remember Me</label>
<Switch inputId="switch1" />
 
<span id="switch2">Remember Me</span>
<Switch aria-labelledby="switch2" />
 
<Switch aria-label="Remember Me" />

Keyboard Support#

KeyFunction
tabMoves focus to the switch.
spaceToggles the checked state.
PrimeReact 11.0.0-alpha.1 on React by PrimeTek