Checkbox 复选框

复选框允许用户选中多个选项。

何时使用

勾选框可以让用户在两种相反的状态、行为或取值之间选择。
适用于在列表中选择单个或多个选项，开启或关闭某个选项。

导入

import { Checkbox, CheckboxGroup } from "@reglow/reui";

代码演示

基础用法

<script setup>
import { ref } from "vue";
import { Checkbox } from "@reglow/reui";

const checked = ref(false);
</script>

<template>
  <Checkbox v-model:checked="checked">Semi Design</Checkbox>
</template>

带辅助文本

通过 extra 传入辅助文本。

<script setup>
import { Checkbox } from "@reglow/reui";
</script>

<template>
  <Checkbox extra="Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统">
    Semi Design
  </Checkbox>
</template>

禁用

<script setup>
import { Checkbox } from "@reglow/reui";
</script>

<template>
  <div class="flex flex-col items-start gap-2">
    <Checkbox :default-checked="false" disabled>Unchecked Disabled</Checkbox>
    <Checkbox :default-checked="true" disabled>Checked Disabled</Checkbox>
  </div>
</template>

半选状态

通过 indeterminate 设置半选状态（只控制样式）。

<script setup>
import { ref } from "vue";
import { Checkbox } from "@reglow/reui";

const indeterminate = ref(true);
</script>

<template>
  <Checkbox :indeterminate="indeterminate">全选</Checkbox>
</template>

Checkbox 组

通过 CheckboxGroup 包裹 Checkbox 使用。

<script setup>
import { ref } from "vue";
import { CheckboxGroup, Checkbox } from "@reglow/reui";

const value = ref(["A", "B"]);
</script>

<template>
  <CheckboxGroup v-model="value">
    <Checkbox value="A">A</Checkbox>
    <Checkbox value="B">B</Checkbox>
    <Checkbox value="C">C</Checkbox>
    <Checkbox value="D">D</Checkbox>
  </CheckboxGroup>
</template>

配置 options

通过 options 属性直接渲染复选框组。

<script setup>
import { ref } from "vue";
import { CheckboxGroup } from "@reglow/reui";

const value = ref(["dsm"]);
const options = [
  { label: "Semi UI", value: "ui" },
  { label: "Semi DSM", value: "dsm", extra: "快速定制你的设计系统" },
  { label: "Semi D2C", value: "d2c", extra: "设计稿转代码" },
];
</script>

<template>
  <CheckboxGroup v-model="value" :options="options" />
</template>

水平排列

通过 direction 控制排列方向。

<script setup>
import { ref } from "vue";
import { CheckboxGroup, Checkbox } from "@reglow/reui";

const value = ref(["1"]);
</script>

<template>
  <CheckboxGroup v-model="value" direction="horizontal">
    <Checkbox value="1">抖音</Checkbox>
    <Checkbox value="2">今日头条</Checkbox>
  </CheckboxGroup>
</template>

全选

结合 indeterminate 实现全选效果。

<script setup>
import { ref, computed } from "vue";
import { CheckboxGroup, Checkbox } from "@reglow/reui";

const plainOptions = ["Photography", "Movies", "Running"];
const checkedList = ref(["Photography", "Running"]);

const indeterminate = computed(
  () => checkedList.value.length > 0 && checkedList.value.length < plainOptions.length,
);
const checkAll = computed(() => checkedList.value.length === plainOptions.length);

const onCheckAllChange = (e) => {
  checkedList.value = e.target.checked ? plainOptions : [];
};
</script>

<template>
  <div class="flex flex-col gap-3">
    <Checkbox
      :indeterminate="indeterminate"
      :checked="checkAll"
      @change="onCheckAllChange"
    >
      全选
    </Checkbox>
    <CheckboxGroup v-model="checkedList">
      <Checkbox v-for="opt in plainOptions" :key="opt" :value="opt">{{ opt }}</Checkbox>
    </CheckboxGroup>
  </div>
</template>

卡片样式

使用 type="card" 实现卡片样式。

<script setup>
import { ref } from "vue";
import { CheckboxGroup, Checkbox } from "@reglow/reui";

const value = ref(["1"]);
</script>

<template>
  <CheckboxGroup v-model="value" type="card" direction="vertical" class="w-[280px]">
    <Checkbox value="1" disabled extra="描述文本">选项一</Checkbox>
    <Checkbox value="2" extra="描述文本">选项二</Checkbox>
    <Checkbox value="3" extra="描述文本">选项三</Checkbox>
  </CheckboxGroup>
</template>

纯卡片样式

使用 type="pureCard" 实现无 checkbox 方框的纯卡片样式。

<script setup>
import { ref } from "vue";
import { CheckboxGroup, Checkbox } from "@reglow/reui";

const value = ref(["1"]);
</script>

<template>
  <CheckboxGroup v-model="value" type="pureCard" direction="vertical" class="w-[280px]">
    <Checkbox value="1" extra="描述文本">选项一</Checkbox>
    <Checkbox value="2" extra="描述文本">选项二</Checkbox>
    <Checkbox value="3" extra="描述文本">选项三</Checkbox>
  </CheckboxGroup>
</template>

受控

<script setup>
import { ref } from "vue";
import { Checkbox, CheckboxGroup } from "@reglow/reui";

const checked = ref(true);
const disabled = ref(false);
const groupValue = ref(["A"]);
</script>

<template>
  <div class="flex flex-col gap-3">
    <Checkbox v-model:checked="checked" :disabled="disabled">受控复选框</Checkbox>
    <CheckboxGroup v-model="groupValue" :disabled="disabled">
      <Checkbox value="A">A</Checkbox>
      <Checkbox value="B">B</Checkbox>
    </CheckboxGroup>
    <button @click="disabled = !disabled">切换禁用</button>
  </div>
</template>

API

Checkbox Props

参数	说明	类型	默认值
value	在 Group 中代表的值	`string \| number`	-
checked	是否选中（受控）	`boolean`	`false`
defaultChecked	初始是否选中	`boolean`	`false`
disabled	是否禁用	`boolean`	`false`
extra	副文本	`string`	-
type	样式类型	`default \| card \| pureCard`	`default`
indeterminate	半选状态（只控制样式）	`boolean`	`false`
name	name 属性	`string`	-
class	附加类名	`string`	-

Checkbox Events

事件	说明	回调参数
change	变化时回调	`(e: Event)`
click	点击回调	`(e: MouseEvent)`

Checkbox Slots

名称	说明
default	复选框内容
extra	副文本

CheckboxGroup Props

参数	说明	类型	默认值
modelValue (v-model)	选中的值数组	`(string \| number)[]`	`[]`
defaultValue	默认选中	`(string \| number)[]`	`[]`
direction	排列方向	`horizontal \| vertical`	`vertical`
type	样式类型	`default \| card \| pureCard`	`default`
disabled	整组禁用	`boolean`	`false`
name	name 属性	`string`	-
options	options 配置	`CheckboxOption[]`	-
class	附加类名	`string`	-

CheckboxGroup Events

事件	说明	回调参数
change	变化时回调	`(checkedValue: (string \| number)[])`

CheckboxOption

参数	说明	类型	默认值
label	显示文本	`string`	-
value	值	`string \| number`	-
disabled	是否禁用	`boolean`	`false`
extra	副文本	`string`	-
class	附加类名	`string`	-

类型对照

type	说明
`default`	默认方框复选框
`card`	卡片样式（带 checkbox 方框）
`pureCard`	纯卡片样式（无 checkbox 方框）

Cascader 级联选择

从相关联的数据集合中进行多级选择

CodeEditor 代码编辑器