Switch

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

Accessible Base UI switch with Motion layout spring physics.

Installation

npx shadcn@latest add @soralabs/base-switch

pnpm dlx shadcn@latest add @soralabs/base-switch

yarn dlx shadcn@latest add @soralabs/base-switch

bun x --bun shadcn@latest add @soralabs/base-switch

npx @soralabs/cli@latest add base-switch

pnpm dlx @soralabs/cli@latest add base-switch

yarn dlx @soralabs/cli@latest add base-switch

bun x --bun @soralabs/cli@latest add base-switch

Install the following dependencies:

npm install @base-ui/react motion class-variance-authority

pnpm add @base-ui/react motion class-variance-authority

yarn add @base-ui/react motion class-variance-authority

bun add @base-ui/react motion class-variance-authority

Install the following registry dependencies:

npx shadcn@latest add utils @soralabs/hooks-use-controlled-state

pnpm dlx shadcn@latest add utils @soralabs/hooks-use-controlled-state

yarn dlx shadcn@latest add utils @soralabs/hooks-use-controlled-state

bun x --bun shadcn@latest add utils @soralabs/hooks-use-controlled-state

Copy and paste the following code into your project:

components/sora-ui/base/switch.tsx

Loading...

Update the import paths to match your project setup.

File Structure

switch.tsx

use-controlled-state.tsx

Usage

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

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

Examples

With Icons

Switch with contextual track icons and helper description.

Sizes

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`	-

Installation

npx shadcn@latest add @soralabs/base-switch

pnpm dlx shadcn@latest add @soralabs/base-switch

yarn dlx shadcn@latest add @soralabs/base-switch

bun x --bun shadcn@latest add @soralabs/base-switch

npx @soralabs/cli@latest add base-switch

pnpm dlx @soralabs/cli@latest add base-switch

yarn dlx @soralabs/cli@latest add base-switch

bun x --bun @soralabs/cli@latest add base-switch

Install the following dependencies:

npm install @base-ui/react motion class-variance-authority

pnpm add @base-ui/react motion class-variance-authority

yarn add @base-ui/react motion class-variance-authority

bun add @base-ui/react motion class-variance-authority

Install the following registry dependencies:

npx shadcn@latest add utils @soralabs/hooks-use-controlled-state

pnpm dlx shadcn@latest add utils @soralabs/hooks-use-controlled-state

yarn dlx shadcn@latest add utils @soralabs/hooks-use-controlled-state

bun x --bun shadcn@latest add utils @soralabs/hooks-use-controlled-state

Copy and paste the following code into your project:

components/sora-ui/base/switch.tsx

Loading...

Update the import paths to match your project setup.

File Structure

switch.tsx

use-controlled-state.tsx

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`	-

Switch · Base 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 · Base 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