Checkbox
Checkbox 允许用户从一个集合中选择一个或多个项目。
使用
Disabled
Sizes
Colors
Icon
Controlled
Checkbox Group
Vertical
Disabled
API
Checkbox Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | Checkbox 的标签。 |
| color | 'blue'|'orange'|'yellow'|'ryan'|'red'|'green'|'pick'|'purple'|'gray' | 'blue' | Checkbox 的颜色。 |
| size | 'sm'|'md'|'lg' | 'md' | Checkbox 的大小。 |
| radius | 'sm'|'md'|'lg'|'full' | size | Checkbox 的 borderRadius。 |
| disabled | boolean | false | Checkbox 是否禁用。 |
| checked | boolean | - | Checkbox 是否选中。 |
| defaultChecked | boolean | - | Checkbox 是否默认选中（非受控）。 |
| icon | ReactNode | (ownerState) => ReactNode | - | Checkbox 选中时的图标。 |
| className | ClassValue | - | 用于根元素的 className。 |
| name | string | - | Checkbox 的 name。 |
| value | string | - | Checkbox 的 value。 |
| ref | Ref | - | 用于转发 Checkbox 内的 input。 |
| onChange | function | - | 当 Checkbox 状态发生变化时会触发该回调函数。 |
| as | ElementType | 'input' | 用于 Checkbox 内 input 的组件。可以是表示 HTML 元素的字符串，也可以是一个组件。 |
| sx | CSSObject|CSSObject[]|(ownerState: OwnerState) => CSSObject | CSSObject[]) | - | 用于根元素的 sx 属性。 |
| classes | Partial<Record<Slots, ClassValue>> | - | Checkbox Slots 的 className。 |
| slotProps | Partial<Record<Slots, ComponentPropsWithRef>> | - | Checkbox Slots 的 props。 |
Checkbox Slots
| Slot Name | Class Name | Default Component | Description |
|---|---|---|---|
| root | .nui-checkbox-root | 'label' | Checkbox 的根元素。 |
| input | .nui-checkbox-input | 'input' | Checkbox 内的 input。 |
| icon | .nui-checkbox-icon | 'span' | Checkbox 内的 icon 容器。 |
| label | .nui-checkbox-label | 'span' | Checkbox 的标签。 |
Checkbox Group Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | CheckboxGroup 的子元素。 |
| disabled | boolean | - | CheckboxGroup 是否禁用。 |
| name | string|number | - | CheckboxGroup 的 name。 |
| color | 'blue'|'orange'|'yellow'|'ryan'|'red'|'green'|'pick'|'purple'|'gray' | 'blue' | CheckboxGroup 的颜色。 |
| size | 'sm'|'md'|'lg' | 'md' | CheckboxGroup 的大小。 |
| radius | 'sm'|'md'|'lg'|'full' | size | CheckboxGroup 的 BorderRadius。 |
| value | T extends (string | number)[] | - | CheckboxGroup 指定选中的值。 |
| defaultValue | T extends (string | number)[] | - | CheckboxGroup 默认选中的值。 |
| onChange | (value: T[]) => void | - | 当 CheckboxGroup 的值发生变化时触发回调函数。 |
最后更新时间