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