Switch

On or off, as a switch rather than a checkbox, for a setting that takes effect the moment it flips. A change that waits for a Save button is a checkbox's job.

import { Switch } from '@basmilius/react-ui';

import { useState } from 'react';
import { Switch } from '@basmilius/react-ui';

export default function SwitchDemo() {
    const [sounds, setSounds] = useState(true);

    return (
        <div className="flex w-72 flex-col gap-3">
            <label className="flex items-center justify-between gap-4 text-sm text-text">
                Play sounds
                <Switch label="Play sounds" checked={sounds} onCheckedChange={setSounds} />
            </label>
            <label className="flex items-center justify-between gap-4 text-sm text-text-muted">
                Sync over cellular
                <Switch label="Sync over cellular" checked={false} onCheckedChange={() => {}} disabled />
            </label>
        </div>
    );
}

A switch has a label for its accessible name. The row it sits in usually carries the visible one, as a SettingsRow does. Space toggles it from the keyboard.

Props

Prop	Type
checked	boolean	Required.
onCheckedChange	(checked: boolean) => void	Required.
label	string	Required.
disabled	boolean
className	string
ref	Ref<HTMLButtonElement>

SwitchProps is an exported type.