复选框 Checkbox

#基础用法

Ship the registerOutline the storyArchived

checkbox/basic.vue

<script setup lang="ts">
import { check } from "@bysages/icons";
import { Checkbox, Icon } from "@bysages/vue";
</script>

<template>
  <div class="grid gap-3 w-full">
    <Checkbox.Root default-checked>
      <Checkbox.Control>
        <Checkbox.Indicator>
          <Icon :glyph="check" />
        </Checkbox.Indicator>
      </Checkbox.Control>
      <Checkbox.Label>Ship the register</Checkbox.Label>
      <Checkbox.HiddenInput />
    </Checkbox.Root>
    <Checkbox.Root>
      <Checkbox.Control>
        <Checkbox.Indicator>
          <Icon :glyph="check" />
        </Checkbox.Indicator>
      </Checkbox.Control>
      <Checkbox.Label>Outline the story</Checkbox.Label>
      <Checkbox.HiddenInput />
    </Checkbox.Root>
    <Checkbox.Root disabled>
      <Checkbox.Control>
        <Checkbox.Indicator>
          <Icon :glyph="check" />
        </Checkbox.Indicator>
      </Checkbox.Control>
      <Checkbox.Label>Archived</Checkbox.Label>
      <Checkbox.HiddenInput />
    </Checkbox.Root>
  </div>
</template>

#属性

#Control

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#GroupProvider

属性	类型	默认值	描述
`value`	`UnwrapRef<UseCheckboxGroupReturn>`		—

#Group

属性	类型	描述
`defaultValue`	`string[]`	非受控时 `value` 的初始值
`disabled`	`boolean`	为 `true` 时禁用复选框组
`invalid`	`boolean`	为 `true` 时复选框组无效
`maxSelectedValues`	`number`	可选值的最大数量
`modelValue`	`string[]`	复选框组的受控值
`name`	`string`	复选框组内输入字段的名称，用于表单提交
`readOnly`	`boolean`	为 `true` 时复选框组只读

#HiddenInput

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#Indicator

属性	类型	默认值	描述
`indeterminate`	`boolean`		—

#Label

纯造型的部件——自身没有属性，沿用部件结构的共享样式。

#Root

属性	类型	默认值	描述
`size`	`String as PropType<"sm" \| "md" \| "lg">`	`"md"`	复选框尺寸，可为 `sm`、`md` 或 `lg`；勾选图标随之缩放
`checked`	`checkbox.CheckedState`		复选框的受控选中状态
`defaultChecked`	`checkbox.CheckedState`		复选框初始选中状态；无需控制选中状态时使用
`disabled`	`boolean`		复选框是否禁用
`form`	`string`		复选框所属表单的 id
`id`	`string`		组件内部状态机的唯一标识
`ids`	`Partial<{ root: string; hiddenInput: string; control: string; label: string; }>`		复选框内各元素的 id；便于组合使用
`invalid`	`boolean`		复选框是否无效
`name`	`string`		复选框输入字段的名称，用于表单提交
`readOnly`	`boolean`		复选框是否只读
`required`	`boolean`		复选框是否必填
`value`	`string`	`"on"`	复选框 input 的值，用于表单提交