Photonix

Switch

A toggle control to switch between two states, usually on and off.

Preview

Usage
"use client";

import { Switch } from '@photonix/ultimate';

export default function SwitchPreviewExample() {
    return <Switch label="Email alerts" defaultChecked size="large" />;
}

Component API

Switch

Prop
Type
Default
Description
checked
boolean
-
Whether the switch is on (controlled)
defaultChecked
boolean
false
Initial state when uncontrolled
size
"small" | "large"
'large'
Size of the switch
label
React.ReactNode
-
Label text for the switch
onChange
((checked: boolean) => void)
-
Callback when switch state changes

Variants

Switch States

Switch examples include default checked state, size, labels, and disabled state.

Switch States
"use client";

import { Stack, Switch } from '@photonix/ultimate';

export default function SwitchBasicExample() {
    return (
        <Stack gap="sm">
            <Switch label="Email alerts" defaultChecked size="large" />
            <Switch label="Compact mode" size="small" />
            <Switch label="Locked setting" disabled defaultChecked size="large" />
        </Stack>
    );
}

Sizes

Available in small and large (default) sizes.

Large

Small

Sizes
"use client";

import { Flex, Switch, Text } from '@photonix/ultimate';

export default function SwitchSizesExample() {
    return (
        <Flex gap="xl" align="center">
            <Flex direction="column" gap="sm">
                <Text variant="body-md" color="secondary">Large</Text>
                <Switch size="large" label="Switch" defaultChecked />
            </Flex>
            <Flex direction="column" gap="sm">
                <Text variant="body-md" color="secondary">Small</Text>
                <Switch size="small" label="Switch" defaultChecked />
            </Flex>
        </Flex>
    );
}

States

Disabled states.

States
"use client";

import { Flex, Switch } from '@photonix/ultimate';

export default function SwitchStatesExample() {
    return (
        <Flex gap="xl" align="center">
            <Switch label="Disabled Off" disabled />
            <Switch label="Disabled On" disabled defaultChecked />
        </Flex>
    );
}

On this page

Preview
Component API
Variants
Basic Controlled
Sizes
States
Photonix UI - React Components, Templates & Figma Design System