表单

Checkbox 多选框

用于多选框场景的 MoriUI 组件。

资源

组件源码问题反馈

导入 

import { Checkbox } from 'moriui'

选中状态

使用 v-model 控制 boolean 或 indeterminate；defaultValue 只适用于非受控初始值。

无效状态

Checkbox 使用 aria-invalid，外围 Field 使用 data-invalid，使视觉与辅助技术同步。

禁用状态

disabled 由 Reka UI 阻止交互；Field 可用 data-disabled 同步标签样式。

RTL

复选框状态与键盘行为不受文字方向影响，标签沿外围 dir 排列。

示例

概览

组合标签、说明、选中与禁用状态。

可以随时在设置中更改。

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

  const checked = shallowRef(false)
</script>

<template>
  <FieldGroup class="w-full max-w-sm">
    <Field orientation="horizontal">
      <Checkbox id="terms" v-model="checked" /><FieldLabel for="terms">
        接受条款与条件
      </FieldLabel>
    </Field>
    <Field orientation="horizontal">
      <Checkbox id="updates" v-model="checked" />
      <FieldContent>
        <FieldLabel for="updates">
          接收产品更新
        </FieldLabel><FieldDescription>可以随时在设置中更改。</FieldDescription>
      </FieldContent>
    </Field>
  </FieldGroup>
</template>

无效

同步 aria-invalid 与 Field data-invalid。

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

  const checked = shallowRef(false)
</script>

<template>
  <Field data-invalid orientation="horizontal">
    <Checkbox id="terms-invalid" v-model="checked" aria-invalid="true" />
    <FieldLabel for="terms-invalid">
      接受条款与条件
    </FieldLabel>
  </Field>
</template>

基础

用 FieldLabel 建立明确标签关联。

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

  const checked = shallowRef(false)
</script>

<template>
  <Field orientation="horizontal">
    <Checkbox id="terms-basic" v-model="checked" />
    <FieldLabel for="terms-basic">
      接受条款与条件
    </FieldLabel>
  </Field>
</template>

说明

FieldContent 组织标签与帮助文字。

勾选即表示你同意服务条款和隐私政策。

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

  const checked = shallowRef(false)
</script>

<template>
  <Field orientation="horizontal">
    <Checkbox id="terms-description" v-model="checked" />
    <FieldContent>
      <FieldLabel for="terms-description">
        接受条款与条件
      </FieldLabel>
      <FieldDescription>勾选即表示你同意服务条款和隐私政策。</FieldDescription>
    </FieldContent>
  </Field>
</template>

禁用

disabled 阻止交互并弱化视觉。

<script setup lang="ts">
  import { Checkbox, Field, FieldLabel } from 'moriui'
</script>

<template>
  <Field data-disabled orientation="horizontal">
    <Checkbox id="notifications-disabled" disabled />
    <FieldLabel for="notifications-disabled">
      启用通知
    </FieldLabel>
  </Field>
</template>

复选组

FieldSet 与 FieldGroup 组织多个独立选项。

在桌面显示

选择需要在桌面显示的项目。

<script setup lang="ts">
  import { ref } from 'vue'
  import {
    Checkbox,
    Field,
    FieldDescription,
    FieldGroup,
    FieldLabel,
    FieldLegend,
    FieldSet
  } from 'moriui'

  const choices = ref({ hardDisks: true, externalDisks: true, opticalMedia: false })
</script>

<template>
  <FieldSet class="w-full max-w-xs">
    <FieldLegend variant="label">
      在桌面显示
    </FieldLegend>
    <FieldDescription>选择需要在桌面显示的项目。</FieldDescription>
    <FieldGroup class="gap-3">
      <Field orientation="horizontal">
        <Checkbox id="hard-disks" v-model="choices.hardDisks" /><FieldLabel for="hard-disks">
          硬盘
        </FieldLabel>
      </Field>
      <Field orientation="horizontal">
        <Checkbox id="external-disks" v-model="choices.externalDisks" /><FieldLabel for="external-disks">
          外接磁盘
        </FieldLabel>
      </Field>
      <Field orientation="horizontal">
        <Checkbox id="optical-media" v-model="choices.opticalMedia" /><FieldLabel for="optical-media">
          CD、DVD 与 iPod
        </FieldLabel>
      </Field>
    </FieldGroup>
  </FieldSet>
</template>

表格

每行复选框都有可访问名称。

选择 姓名 角色
林晓管理员
周然编辑
陈屿成员
<script setup lang="ts">
  import { ref } from 'vue'
  import { Checkbox } from 'moriui'

  const rows = ref([
    { id: 1, name: '林晓', role: '管理员', selected: true },
    { id: 2, name: '周然', role: '编辑', selected: false },
    { id: 3, name: '陈屿', role: '成员', selected: false }
  ])
</script>

<template>
  <table class="w-full max-w-md text-sm">
    <thead>
      <tr class="border-b">
        <th class="p-2 text-start">
          选择
        </th><th class="p-2 text-start">
          姓名
        </th><th class="p-2 text-start">
          角色
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="row in rows" :key="row.id" class="border-b">
        <td class="p-2">
          <Checkbox v-model="row.selected" :aria-label="`选择${row.name}`" />
        </td><td class="p-2">
          {{ row.name }}
        </td><td class="p-2">
          {{ row.role }}
        </td>
      </tr>
    </tbody>
  </table>
</template>

RTL

阿拉伯语标签沿 RTL 内容流排列。

يمكنك تغيير هذا الخيار في أي وقت.

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

  const checked = shallowRef(true)
</script>

<template>
  <Field dir="rtl" orientation="horizontal">
    <Checkbox id="terms-rtl" v-model="checked" dir="rtl" />
    <FieldContent>
      <FieldLabel for="terms-rtl">
        قبول الشروط والأحكام
      </FieldLabel><FieldDescription>يمكنك تغيير هذا الخيار في أي وقت.</FieldDescription>
    </FieldContent>
  </Field>
</template>

API

属性 类型 默认值 说明
v-modelboolean | 'indeterminate'undefined受控选中状态。
defaultValueboolean | 'indeterminate'false非受控初始状态。
disabledbooleanfalse禁止焦点与切换交互。
required / name / valueCheckboxRootPropsundefined由 Reka UI 透传的表单属性。

无障碍说明

Checkbox 复用 Reka UI 的原生表单语义、Space 切换与状态属性。每个控件必须通过 FieldLabel、Label 或 aria-label 获得名称；无效状态同时设置 aria-invalid 和可读错误消息。

关联组件

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