Switch Group

A group of switch components that allows users to toggle multiple related options. It supports both single and multiple selection modes.

Component Features

• 🔄 Multiple Modes: Supports both single and multiple selection modes.
• 🎛️ Bulk Operations: Provides built-in methods for selectAll and clearAll in multiple selection mode.
• 📐 Direction Control: Can be arranged horizontally (row) or vertically (column).
• 📋 Form & Table Integration: Easily integrates with BrForm and BrTable components.
• 🎨 Size Inheritance: Automatically inherits sizes from global configurations or props, and passes them to child switch items.

Basic Usage

The basic usage of SwitchGroup with mode switching and bulk operations.

Wi-FiBluetoothAirplane Mode

当前值: [ "wifi", "bluetooth" ]

Example

Form Integration

Typical application in form operations for preference settings.

通知偏好设置

邮件通知短信通知App 推送通知

Example

Table Integration

Used within a table to manage list item permissions or statuses.

用户	权限设置
User 1	读取写入管理
User 2	读取写入管理

Example

API Reference

BrSwitchGroup

Prop	Type	Default	Description
modelValue (v-model)	string | number | (string | number)[] | undefined	-	The selected value(s)
mode	'single' | 'multiple'	'multiple'	Selection mode
disabled	boolean	false	Whether the entire group is disabled
direction	'row' | 'column'	'row'	Layout direction
size	'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'default'	-	Size of the switches
lazyRender	boolean	false	Whether to lazily render the group

Methods

Name	Description
selectAll	Selects all available options (only available in multiple mode)
clearAll	Clears all selections

BrSwitchGroupItem

Prop	Type	Default	Description
value	string | number	-	Unique value for the item (Required)
label	string	-	Text label for the switch
disabled	boolean	false	Whether the item is disabled
checkedText	string	-	Text to display when checked
uncheckedText	string	-	Text to display when unchecked
loading	boolean	false	Whether the item is in a loading state