Switch

An accessible toggle switch component built on Radix UI with spring layout physics and full customization.

Tweak Props

label

disabled

false

switch.tsx

Loading code…

Accessible Radix UI switch with Motion layout spring physics.

Installation

Install the following dependencies:

Install the following registry dependencies:

Copy and paste the following code into your project:

components/sora-ui/radix/switch.tsx

Loading code…

Update the import paths to match your project setup.

File Structure

switch.tsx

use-controlled-state.tsx

Usage

import { Switch } from "@/components/sora-ui/radix/switch";

export default function Page() {
  return <Switch label="Airplane Mode" />;
}

Examples

With Icons

switch-with-icon.tsx

Loading code…

Switch with contextual track icons and helper description.

Sizes

switch-sizes.tsx

Loading code…

Switch rendered across small (sm), default, and large (lg) size variants.

Props

Prop	Type	Default
`checked?`	`boolean`	-
`defaultChecked?`	`boolean`	`false`
`onCheckedChange?`	`(checked: boolean) => void`	-
`size?`	`"sm" \| "default" \| "lg"`	`"default"`
`label?`	`ReactNode`	-
`description?`	`ReactNode`	-
`labelPosition?`	`"left" \| "right"`	`"right"`
`thumbIcon?`	`ReactNode`	-
`checkedIcon?`	`ReactNode`	-
`uncheckedIcon?`	`ReactNode`	-
`disabled?`	`boolean`	`false`
`className?`	`string`	-
`thumbClassName?`	`string`	-
`labelClassName?`	`string`	-
`descriptionClassName?`	`string`	-

Airplane Mode

Tweak Props

label

disabled

false

switch.tsx

Loading code…

Accessible Radix UI switch with Motion layout spring physics.

Installation

Install the following dependencies:

Install the following registry dependencies:

Copy and paste the following code into your project:

components/sora-ui/radix/switch.tsx

Loading code…

Update the import paths to match your project setup.

File Structure

switch.tsx

use-controlled-state.tsx

Usage

import { Switch } from "@/components/sora-ui/radix/switch";

export default function Page() {
  return <Switch label="Airplane Mode" />;
}

Examples

With Icons

Theme Mode

Toggle between light and dark visual aesthetics.

switch-with-icon.tsx

Loading code…

Switch with contextual track icons and helper description.

Sizes

Small Switch

Default Switch

Large Switch

switch-sizes.tsx

Loading code…

Switch rendered across small (sm), default, and large (lg) size variants.

Props

Switch

Prop	Type	Default
`checked?`	`boolean`	-
`defaultChecked?`	`boolean`	`false`
`onCheckedChange?`	`(checked: boolean) => void`	-
`size?`	`"sm" \| "default" \| "lg"`	`"default"`
`label?`	`ReactNode`	-
`description?`	`ReactNode`	-
`labelPosition?`	`"left" \| "right"`	`"right"`
`thumbIcon?`	`ReactNode`	-
`checkedIcon?`	`ReactNode`	-
`uncheckedIcon?`	`ReactNode`	-
`disabled?`	`boolean`	`false`
`className?`	`string`	-
`thumbClassName?`	`string`	-
`labelClassName?`	`string`	-
`descriptionClassName?`	`string`	-

Switch · Radix UI

Installation

Install the following dependencies:

Install the following registry dependencies:

Copy and paste the following code into your project:

Update the import paths to match your project setup.

File Structure

Usage

Examples

With Icons

Sizes

Props

Switch

On this page

Switch · Radix UI

Installation

Install the following dependencies:

Install the following registry dependencies:

Copy and paste the following code into your project:

Update the import paths to match your project setup.

File Structure

Usage

Examples

With Icons

Sizes

Props

Switch

On this page