Switch 开关

Form · Interactive component

Boolean switches.

On-demand importwbbb-ui/components/switch

Basic Usage

<script setup lang="ts">
import { ref } from 'vue'
import { WbbbSwitch } from 'wbbb-ui/components/switch'
import 'wbbb-ui/styles/switch'

const value = ref('')
</script>

<template>
  <WbbbSwitch v-model="value" />
</template>

Live mobile previewOpen in a new tab ↗

States and Interaction

All listed states can be operated and verified in the live Playground preview.

DefaultFilledFocusDisabledError

API Reference

Props

Property	Description	Type	Default	Required
`activeColor`	Sets the color used by the active state.	`string`	`''`	No
`disabled`	Prevents user interaction with the component.	`boolean`	`false`	No
`modelValue`	Provides the current value used by v-model.	`boolean`	`false`	No

Events

update:modelValue
change

Slots

None

Two-way binding

Supports v-model (modelValue).

Platform Notes

Build verification: H5, App Vue, WeChat Mini Program, Alipay Mini Program, and Douyin Mini Program.

Runtime differences: H5 supports keyboard focus and reduced motion. Mini Programs provide equivalent touch interaction; verify upload, date selection, and overlays on target platforms.

Usage note: Use Playground to verify further state combinations and cross-platform behavior.

Switch 开关 ​

Basic Usage ​

States and Interaction ​

API Reference ​