表单

Toggle 切换控件

用于切换控件场景的 MoriUI 组件。

资源

导入

import { Toggle } from 'moriui'

切换状态

Toggle 通过 boolean v-model 表达 on/off，并输出 aria-pressed 与 data-state。

变体与尺寸

variant 支持 default/outline，size 支持 sm/default/lg；图标与文字可直接放入默认插槽。

禁用状态

disabled 使用原生 button 禁用语义并阻止 pressed 状态变化。

RTL

图标与文字按内容流排列，Toggle 自身的 on/off 行为不依赖书写方向。

示例

概览

描边小号收藏按钮保持受控状态。

<script setup lang="ts">
  import { Toggle } from 'moriui'
  import { shallowRef } from 'vue'
  import { Bookmark } from '@lucide/vue'

  const bookmarked = shallowRef(false)
</script>

<template>
  <Toggle
    v-model="bookmarked"
    aria-label="切换收藏"
    size="sm"
    variant="outline"
  >
    <Bookmark aria-hidden="true" />收藏
  </Toggle>
</template>

描边

两个独立 Toggle 控制斜体与粗体。

<script setup lang="ts">
  import { Toggle } from 'moriui'
  import { shallowRef } from 'vue'
  import { Bold, Italic } from '@lucide/vue'

  const italic = shallowRef(false)
  const bold = shallowRef(true)
</script>

<template>
  <div class="flex flex-wrap items-center gap-2">
    <Toggle v-model="italic" aria-label="切换斜体" variant="outline">
      <Italic aria-hidden="true" />斜体
    </Toggle>
    <Toggle v-model="bold" aria-label="切换粗体" variant="outline">
      <Bold aria-hidden="true" />粗体
    </Toggle>
  </div>
</template>

图标与文字

默认变体组合图标和可读文字。

<script setup lang="ts">
  import { Toggle } from 'moriui'
  import { shallowRef } from 'vue'
  import { Italic } from '@lucide/vue'

  const italic = shallowRef(false)
</script>

<template>
  <Toggle v-model="italic" aria-label="切换斜体">
    <Italic aria-hidden="true" />斜体
  </Toggle>
</template>

尺寸

sm、default 与 lg 覆盖常用密度。

<script setup lang="ts">
  import { Toggle } from 'moriui'
  import { shallowRef } from 'vue'

  const small = shallowRef(false)
  const normal = shallowRef(true)
  const large = shallowRef(false)
</script>

<template>
  <div class="flex flex-wrap items-center gap-2">
    <Toggle
      v-model="small"
      aria-label="切换小号"
      size="sm"
      variant="outline"
    >
      小号
    </Toggle>
    <Toggle v-model="normal" aria-label="切换默认" variant="outline">
      默认
    </Toggle>
    <Toggle
      v-model="large"
      aria-label="切换大号"
      size="lg"
      variant="outline"
    >
      大号
    </Toggle>
  </div>
</template>

禁用

默认与描边变体都保留禁用语义。

<script setup lang="ts">
  import { Toggle } from 'moriui'
  import { shallowRef } from 'vue'

  const disabled = shallowRef(false)
  const disabledOutline = shallowRef(true)
</script>

<template>
  <div class="flex flex-wrap items-center gap-2">
    <Toggle v-model="disabled" aria-label="禁用切换按钮" disabled>
      不可用
    </Toggle>
    <Toggle
      v-model="disabledOutline"
      aria-label="禁用描边切换按钮"
      disabled
      variant="outline"
    >
      不可用
    </Toggle>
  </div>
</template>

RTL

阿拉伯语收藏按钮沿 RTL 内容流排列。

<script setup lang="ts">
  import { Toggle } from 'moriui'
  import { shallowRef } from 'vue'
  import { Bookmark } from '@lucide/vue'

  const bookmarked = shallowRef(false)
</script>

<template>
  <Toggle
    v-model="bookmarked"
    aria-label="تبديل الإشارة المرجعية"
    dir="rtl"
    size="sm"
    variant="outline"
  >
    <Bookmark aria-hidden="true" />إشارة مرجعية
  </Toggle>
</template>

API

属性	类型	默认值	说明
Toggle v-model	`boolean \| null`	`undefined`	受控 pressed 状态。
Toggle defaultValue	`boolean`	`undefined`	非受控初始 pressed 状态。
Toggle variant	`'default' \| 'outline'`	`'default'`	切换按钮视觉层级。
Toggle size	`'sm' \| 'default' \| 'lg'`	`'default'`	切换按钮尺寸。
Toggle disabled / required	`boolean`	`false`	禁用交互与隐藏表单控件的必填语义。
Toggle name	`string`	`undefined`	独立 Toggle 作为表单控件时的字段名。
Toggle as / asChild	`string \| Component / boolean`	`'button' / false`	元素组合能力；默认输出原生 button。

无障碍说明

Toggle 复用 Reka UI 的原生 button、aria-pressed、Space/Enter 与隐藏表单输入。仅图标 Toggle 必须提供 aria-label；连续选择一组相关状态时应使用 ToggleGroup，而不是手动组合多个独立 Toggle。

关联组件

操作按钮