表单

Switch 状态开关

用于状态开关场景的 MoriUI 组件。

资源

导入

import { Switch } from 'moriui'

开关状态

Switch 使用 v-model 持有 boolean 或自定义 trueValue/falseValue，checked/unchecked 状态由 Reka UI 输出。

说明与选择卡片

FieldContent 组合标签和说明；FieldLabel 可包裹整行以扩大开关的可点击区域。

禁用与无效

disabled 阻止切换；aria-invalid 与外围 Field 的 data-invalid 同步校验状态。

尺寸

size 支持 sm 与 default，两者保持相同的键盘和表单行为。

RTL

开关状态不依赖书写方向，标签与说明沿 Field 的 dir 排列。

示例

概览

开关与标签通过 id/for 关联。

飞行模式

<script setup lang="ts">
  import { shallowRef } from 'vue'
  import { Field, FieldLabel, Switch } from 'moriui'

  const airplaneMode = shallowRef(false)
</script>

<template>
  <Field class="w-fit" orientation="horizontal">
    <Switch id="airplane-mode" v-model="airplaneMode" />
    <FieldLabel for="airplane-mode">
      飞行模式
    </FieldLabel>
  </Field>
</template>

说明

横向 Field 对齐说明文字与状态开关。

跨设备共享

专注状态会同步到已登录的设备。

<script setup lang="ts">
  import { shallowRef } from 'vue'
  import { Field, FieldContent, FieldDescription, FieldLabel, Switch } from 'moriui'

  const shared = shallowRef(false)
</script>

<template>
  <Field class="max-w-sm" orientation="horizontal">
    <FieldContent>
      <FieldLabel for="switch-focus-mode">
        跨设备共享
      </FieldLabel>
      <FieldDescription>专注状态会同步到已登录的设备。</FieldDescription>
    </FieldContent>
    <Switch id="switch-focus-mode" v-model="shared" />
  </Field>
</template>

选择卡片

整行标签提供更大的可点击区域。

跨设备共享

专注状态会同步到已登录的设备。

启用通知

专注模式变化时接收通知。

<script setup lang="ts">
  import { shallowRef } from 'vue'
  import {
    Field,
    FieldContent,
    FieldDescription,
    FieldGroup,
    FieldLabel,
    FieldTitle,
    Switch
  } from 'moriui'

  const share = shallowRef(false)
  const notifications = shallowRef(true)
</script>

<template>
  <FieldGroup class="w-full max-w-sm">
    <FieldLabel for="switch-share">
      <Field orientation="horizontal">
        <FieldContent>
          <FieldTitle>跨设备共享</FieldTitle>
          <FieldDescription>专注状态会同步到已登录的设备。</FieldDescription>
        </FieldContent>
        <Switch id="switch-share" v-model="share" />
      </Field>
    </FieldLabel>
    <FieldLabel for="switch-notifications">
      <Field orientation="horizontal">
        <FieldContent>
          <FieldTitle>启用通知</FieldTitle>
          <FieldDescription>专注模式变化时接收通知。</FieldDescription>
        </FieldContent>
        <Switch id="switch-notifications" v-model="notifications" />
      </Field>
    </FieldLabel>
  </FieldGroup>
</template>

禁用

disabled 阻止切换并同步 Field 视觉。

不可更改

<script setup lang="ts">
  import { shallowRef } from 'vue'
  import { Field, FieldLabel, Switch } from 'moriui'

  const enabled = shallowRef(false)
</script>

<template>
  <Field class="w-fit" orientation="horizontal" data-disabled>
    <Switch id="switch-disabled" v-model="enabled" disabled />
    <FieldLabel for="switch-disabled">
      不可更改
    </FieldLabel>
  </Field>
</template>

无效

aria-invalid 与文字说明表达必选要求。

接受条款与条件

继续之前必须接受条款与条件。

<script setup lang="ts">
  import { shallowRef } from 'vue'
  import { Field, FieldContent, FieldDescription, FieldLabel, Switch } from 'moriui'

  const accepted = shallowRef(false)
</script>

<template>
  <Field class="max-w-sm" orientation="horizontal" data-invalid>
    <FieldContent>
      <FieldLabel for="switch-terms">
        接受条款与条件
      </FieldLabel>
      <FieldDescription>继续之前必须接受条款与条件。</FieldDescription>
    </FieldContent>
    <Switch id="switch-terms" v-model="accepted" aria-invalid="true" />
  </Field>
</template>

尺寸

sm 与 default 适配不同密度。

小号

默认

<script setup lang="ts">
  import { shallowRef } from 'vue'
  import { Field, FieldGroup, FieldLabel, Switch } from 'moriui'

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

<template>
  <FieldGroup class="w-full max-w-40">
    <Field orientation="horizontal">
      <Switch id="switch-size-sm" v-model="small" size="sm" />
      <FieldLabel for="switch-size-sm">
        小号
      </FieldLabel>
    </Field>
    <Field orientation="horizontal">
      <Switch id="switch-size-default" v-model="normal" />
      <FieldLabel for="switch-size-default">
        默认
      </FieldLabel>
    </Field>
  </FieldGroup>
</template>

RTL

阿拉伯语标签在 RTL 横向布局中工作。

المشاركة عبر الأجهزة

تتم مزامنة حالة التركيز مع أجهزتك.

<script setup lang="ts">
  import { shallowRef } from 'vue'
  import { Field, FieldContent, FieldDescription, FieldLabel, Switch } from 'moriui'

  const shared = shallowRef(false)
</script>

<template>
  <Field class="max-w-sm" dir="rtl" orientation="horizontal">
    <FieldContent>
      <FieldLabel for="switch-focus-mode-rtl">
        المشاركة عبر الأجهزة
      </FieldLabel>
      <FieldDescription>تتم مزامنة حالة التركيز مع أجهزتك.</FieldDescription>
    </FieldContent>
    <Switch id="switch-focus-mode-rtl" v-model="shared" />
  </Field>
</template>

API

属性	类型	默认值	说明
Switch v-model	`T \| null`	`falseValue`	当前开关值。
Switch defaultValue	`T`	`falseValue`	非受控初始值。
Switch trueValue / falseValue	`T`	`true / false`	开启与关闭状态对应的模型值。
Switch size	`'sm' \| 'default'`	`'default'`	开关尺寸。
Switch disabled / required	`boolean`	`false`	禁用交互与表单必填语义。
Switch name / value	`string`	`undefined / 'on'`	隐藏表单控件的名称与提交值。
Switch as / asChild	`string \| Component / boolean`	`'button' / false`	元素组合能力；默认保留 button 与 switch 语义。

无障碍说明

Switch 复用 Reka UI 的 role="switch"、aria-checked、Space/Enter 切换与隐藏表单输入。必须关联 FieldLabel/Label 或提供 aria-label；禁用使用 disabled，无效使用 aria-invalid 和可读说明。

关联组件

这个组件暂时没有登记关联条目。