Switch

Tweak Props

label

disabled

false

switch.tsx

Loading code…

Accessible Base 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/base/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/base/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`	-

Built by Axyl. A motion-first component registry for React.

Tweak Props

label

disabled

false

switch.tsx

Loading code…

Accessible Base 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/base/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/base/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

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

Built by Axyl. A motion-first component registry for React.

Airplane Mode

Tweak Props

label

disabled

false

switch.tsx

Loading code…

Accessible Base 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/base/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/base/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`	-

Built by Axyl. A motion-first component registry for React.

Airplane Mode

Tweak Props

label

disabled

false

switch.tsx

Loading code…

Accessible Base 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/base/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/base/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`	-

Built by Axyl. A motion-first component registry for React.

Switch · Base UI

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

On this page

Switch · Base UI

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

On this page

Switch · Base UI

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

On this page

Switch · Base UI

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

On this page