Skip to content

Switch

Binary toggle control. The thumb slides along a spring curve, with a slight stretch on press for physical质感.

Basic Usage

vue
<ASwitch v-model="value" />

Size

vue
<ASwitch v-model="value" size="sm" />
<ASwitch v-model="value" size="md" />

Loading / Disabled

vue
<ASwitch v-model="value" loading />
<ASwitch v-model="value" disabled />

API

Props

NameTypeDefaultDescription
modelValuebooleanfalseToggle state
size'sm' | 'md''md'Size
disabledbooleanfalseDisabled
loadingbooleanfalseLoading state, shows spinner

Emits

NameParametersDescription
update:modelValuebooleanState toggled

Accessibility

  • Uses native <button role="switch">, aria-checked reflects state
  • Space / Enter keys to toggle
  • Focus ring follows global :focus-visible style

MIT License