Checkbox 复选框

用于切换选中、未选中或不确定状态。

命令行安装

npx @loongship-kit/ui add checkbox

受控状态

Accept terms Checked: false

查看代码

<script setup lang="ts">
import { ref } from 'vue'
import { Checkbox } from '@/components/loongship/checkbox'

const checked = ref(false)
</script>

<template>
  <label>
    <Checkbox v-model="checked" />
    Accept terms
  </label>
</template>

不确定状态

Select all vessels

查看代码

<script setup lang="ts">
import { ref } from 'vue'
import { Button } from '@/components/loongship/button'
import { Checkbox } from '@/components/loongship/checkbox'

const selection = ref<boolean | 'indeterminate'>('indeterminate')
</script>

<template>
  <div class="vp-demo-showcase-column">
    <label class="vp-demo-label-row">
      <Checkbox v-model="selection" />
      Select all vessels
    </label>
    <Button
      size="sm"
      variant="outline"
      @click="selection = selection === 'indeterminate' ? true : 'indeterminate'"
    >
      Toggle state
    </Button>
  </div>
</template>

禁用状态

Disabled

查看代码

<template>
  <div class="vp-demo-showcase-column">
    <label class="vp-demo-label-row"><Checkbox disabled /> Disabled</label>
  </div>
</template>

API

属性

属性	类型	默认值	说明
v-model	T | 'indeterminate' | null	-	当前状态
defaultValue	T | 'indeterminate'	false	非受控模式的初始状态
trueValue	T	true	选中时写入的值
falseValue	T	false	未选中时写入的值
disabled	boolean	false	是否禁用
value	AcceptableValue	'on'	表单提交值
name	string	-	表单字段名
required	boolean	false	是否必填
id	string	自动生成	元素 id
as	string | Component	'button'	渲染元素
asChild	boolean	false	合并到唯一子元素
class	ClassValue	-	自定义类名

事件

事件	参数	说明
update:modelValue	value: T | 'indeterminate'	状态改变时触发

插槽

无内容插槽；选中和不确定图标由组件自动渲染。