Checkbox 复选框

Checkbox 复选框

何时使用

  • 需要在一组选项中进行多项选择时。
  • 需要单独表示某个选项的开/关状态时。
复选框组:
已选:A、B

基础用法

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

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

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

  <!-- 辅助文本 -->
  <Checkbox extra="辅助说明文字">Semi Design</Checkbox>

  <!-- 禁用 / 半选 -->
  <Checkbox :default-checked="true" disabled>Checked Disabled</Checkbox>
  <Checkbox indeterminate>全选</Checkbox>

  <!-- 复选组 -->
  <CheckboxGroup v-model="value">
    <Checkbox value="A">选项 A</Checkbox>
    <Checkbox value="B">选项 B</Checkbox>
    <Checkbox value="C">选项 C</Checkbox>
  </CheckboxGroup>
</template>

导入

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

Props

属性类型默认值说明
checkedboolean-选中状态(v-model:checked)
defaultCheckedbooleanfalse默认选中
indeterminatebooleanfalse半选状态(仅样式)
extrastring-辅助文本
disabledbooleanfalse禁用