Skip to content

Checkbox 多选框

一组备选项中进行多选

基础用法

苹果
html
<ivy-checkbox>苹果</ivy-checkbox>

自定义选中和没有选中的值

通过 true-labelfalse-label 来设置选中和没有选中的值,通常适用于单个选择框的情况

勾选即同意本协议
html
<ivy-checkbox true-label="1" false-label="0">勾选即同意本协议</ivy-checkbox>

禁用效果

苹果苹果
html
<ivy-checkbox disabled>苹果</ivy-checkbox>

配合ivy-checkbox-group使用

苹果橘子香蕉
html
<ivy-checkbox-group onchange="console.log(this.value)">
  <ivy-checkbox label="1" checked>苹果</ivy-checkbox>
  <ivy-checkbox label="2">橘子</ivy-checkbox>
  <ivy-checkbox label="3">香蕉</ivy-checkbox>
</ivy-checkbox-group>

Checkbox Props

Prop描述类型可选值默认值
label选中后的值,在配合 CheckboxGroup 时可用string|number|boolean-false
trueLabel选中的值string--
falseLabel未选中的值string--
disabled是否禁用boolean-false
checked选中boolean-false

Checkbox Group Props

Prop描述类型可选值默认值
disabled是否禁用boolean-false

Checkbox Group Event

Event描述
change选中值改变时触发