Switch

A control that allows the user to toggle between checked and not checked.

Basic Usage

Airplane Mode

Example

Disabled State

Set the disabled prop to disable the switch.

Example

Loading State

Set the loading prop to show a loading state. The switch is disabled while loading.

Example

With Label

Use BrLabel to associate a label with the switch.

Enable Notifications

Example

Sizes

Use the size prop to control the size of the switch.

xs

sm

md (default)

lg

xl

2xl

Example

Custom Thumb Content

You can customize the content inside the switch thumb using the thumb slot, such as adding icons or text.

Use icons as thumb content

Use text as thumb content

Example

Theming

Global Customization (BrConfigProvider)

You can override default CSS variables via the theme prop of BrConfigProvider.

ConfigProvider Theme

Emerald Primary

Tailwind Class Override

Blue Override

Example

Local Customization (TailwindCSS)

You can directly override styles using TailwindCSS utility classes.

<template>
  <BrSwitch class="data-[state=checked]:bg-indigo-500" />
</template>

API

Props

Name	Type	Default	Description
modelValue	boolean	false	The checked state of the switch
defaultChecked	boolean	false	The default checked state when using uncontrolled mode
disabled	boolean	false	Whether the switch is disabled
loading	boolean	false	Whether to show loading state
size	'sm' | 'md' | 'lg'	'md'	The size of the switch
name	string	-	The name of the switch
id	string	-	The id of the switch
required	boolean	false	Whether the switch is required
value	string	'on'	The value of the switch
checkedText	string	-	Text to display when checked
uncheckedText	string	-	Text to display when unchecked
error	boolean	false	Whether the switch has validation error

Emits

Name	Description	Parameters
update:modelValue	Event emitted when the checked state changes	(value: boolean)
update:checked	Event emitted when the checked state changes (Radix compatibility)	(value: boolean)

Slots

Name	Description
thumb	Custom content for the switch thumb