Switch

开关。v-model；sizes；disabled；role="switch"。

基础

md v-modelon

disabled ondisabled off

sizes

<script setup lang="ts">
import { ref } from 'vue'
import { HSwitch } from 'happier-ui'

const on = ref(true)
</script>

<template>
  <h-switch v-model="on" aria-label="示例开关" />
</template>

API

Props

名称	类型	默认	说明
modelValue	boolean	false	是否打开
disabled	boolean	false	禁用（不切换）
size	'sm' | 'md' | 'lg'	'md'	尺寸
ariaLabel	string	—	可访问名称（建议填写）

Emits

事件	载荷	说明
update:modelValue	boolean	切换后的值

Slots

无。

无障碍

• role="switch" + aria-checked
• 建议提供 ariaLabel
• disabled 时不切换；:focus-visible