Checkbox 多选

一种常见选择控件,支持单选或多选。同时可用于区分某项设置的开关状态。

Checkbox

Props

Prop NameTypeRequiredDefaultDescription
checkedboolean
是否选中
defaultCheckedbooleanfalse
默认是否选中
disabledboolean
是否禁用
onChange
(value: boolean) => void
点选时的回调
indeterminateboolean
一般用于全选,部分选中的状态
valueValue''
checkbox的值
sizeSize
尺寸,styleType 为 card 时无效
styleTypeStyleType
样式风格
titleReactNode
标题,styleType 为 card 时使用

说明

  • 这是 checkbox 勾选框组件

演示

演示

VIEW CODE ( LIVE )

checked - 是否勾选

VIEW CODE ( LIVE )

disabled - 禁用

VIEW CODE ( LIVE )

size - 尺寸

VIEW CODE ( LIVE )

styleType - 样式风格

VIEW CODE ( LIVE )

uncontrolled

VIEW CODE ( LIVE )

Group

Props

Prop NameTypeRequiredDefaultDescription
value
Value[]
当前值,controlled
defaultValue
Value[]
[]
默认值,uncontrolled
onChange
(value: Value[], selectedStatus: SelectedStatus) => void
修改时的回调
options
({ label: ReactNode } & CheckboxProps)[]
快速定义选项
disabledboolean
禁用
sizeSize
尺寸
styleTypeStyleType
样式风格

说明

  • 这是 Checkbox Group 组件,用于包裹 Checkbox 组件并获取数据
  • 也可以直接使用 options 来定义选项
  • 使用 group 时请使用 value 或 defaultValue 来控制 checkbox 的勾选,不要使用 checked 或 defaultChecked
  • 初始值请注意保证准确性防止出现意外的情况

演示

演示

VIEW CODE ( LIVE )

size - 尺寸

VIEW CODE ( LIVE )

styleType - 样式风格

VIEW CODE ( LIVE )

disabled - 禁用

VIEW CODE ( LIVE )

options - 快捷选项

VIEW CODE ( LIVE )

uncontrolled

VIEW CODE ( LIVE )

boundary - 边界测试

VIEW CODE ( LIVE )
Copyright © 2021-2024 UCloud 优刻得科技股份有限公司