Photonix UI - React Components, Templates & Figma Design System

Switch

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

OffOnDisabled

Usage

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

<Switch label="Off" />
<Switch label="On" defaultChecked />
<Switch label="Disabled" disabled />

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

A simple controlled switch.

Notifications

Basic Controlled

const [checked, setChecked] = useState(false);

<Switch 
  label="Notifications" 
  checked={checked} 
  onChange={setChecked} 
/>

Available in small and large (default) sizes.

Large

Switch

Small

Switch

Sizes

<Switch size="large" label="Large (Default)" defaultChecked />
<Switch size="small" label="Small" defaultChecked />

Disabled states.

Disabled OffDisabled On

States

<Switch label="Disabled Off" disabled />
<Switch label="Disabled On" disabled defaultChecked />