Checkbox
Checkbox 允许用户从一个集合中选择一个或多个项目。
Usage
Disabled
Sizes
Colors
Icon
Indeterminate
Indeterminate 将使 Checkbox 处于不确定状态，覆盖它的外观并保持它的状态，无论用户交互如何，直到设置为 false 。
Controlled
使用 checked 和 onCheckedChange Props 来控制 Checkbox 的选中状态。
Checked: Yes
CheckboxGroup
Select your favorite fruits
Vertical
设置 orientation Props 为 vertical 以垂直排列 Checkbox。
Select your favorite fruits
Disabled
API
Checkbox Props
Checkbox 继承 as (默认为 'input') 的 Props。
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | Checkbox 的标签。 |
| color | 'blue'|'orange'|'yellow'|'ryan'|'red'|'green'|'pink'|'purple'|'gray' | 'blue' | Checkbox 的颜色。 |
| size | 'sm'|'md'|'lg' | 'md' | Checkbox 的大小。 |
| radius | 'sm'|'md'|'lg'|'none'|'full' | size | Checkbox 的 borderRadius。 |
| disabled | boolean | false | Checkbox 是否禁用。 |
| indeterminate | boolean | false | Checkbox 是否为不确定状态。 |
| checked | boolean | - | Checkbox 是否选中。 |
| defaultChecked | boolean | - | Checkbox 是否默认选中。（非受控） |
| icon | ReactNode|(ownerState: CheckboxProps) => ReactNode | - | Checkbox 选中时的图标。 |
| className | ClassValue | - | 用于根元素的 className。 |
| name | string | - | Checkbox 的 name。 |
| value | string|number | - | Checkbox 的 value。 |
| ref | Ref | - | 用于转发 Checkbox 内的 input。 |
| onChange | (event: ChangeEvent<HTMLInputElement>) => void | - | 当 Checkbox 状态发生变化时会触发该回调函数。 |
| onCheckedChange | (checked: boolean) => void | - | 当 Checkbox 状态发生变化时会触发该回调函数。 |
| as | ElementType | 'input' | 用于 Checkbox 内 input 的组件。可以是表示 HTML 元素的字符串，也可以是一个组件。 |
| sx | Interpolation | - | 用于根元素的 sx 属性。 |
| classes | Partial<Record<Slots, ClassValue>> | - | Checkbox Slots 的 className。 |
| slotProps | Partial<Record<Slots, ComponentProps>> | - | Checkbox Slots 的 props。 |
Checkbox Slots
| Slot Name | Class Name | Default Component | Description |
|---|---|---|---|
| root | .nui-checkbox-root | 'label' | Checkbox 的根元素。 |
| icon | .nui-checkbox-icon | 'span' | Checkbox 内的 icon 容器。 |
| label | .nui-checkbox-label | 'span' | Checkbox 的标签。 |
CheckboxGroup Props
CheckboxGroup 继承 as (默认为 'div') 的 Props。
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | CheckboxGroup 的子元素。 |
| label | ReactNode | - | CheckboxGroup 的标签。 |
| disabled | boolean | - | CheckboxGroup 是否禁用。 |
| name | string | - | CheckboxGroup 的 name。 |
| color | 'blue'|'orange'|'yellow'|'ryan'|'red'|'green'|'pink'|'purple'|'gray' | - | CheckboxGroup 的颜色。 |
| size | 'sm'|'md'|'lg' | - | CheckboxGroup 的大小。 |
| radius | 'sm'|'md'|'lg'|'full'|'none' | - | CheckboxGroup 的 BorderRadius。 |
| value | T extends (string | number)[] | - | CheckboxGroup 指定选中的值。 |
| defaultValue | T extends (string | number)[] | - | CheckboxGroup 默认选中的值。 |
| onValueChange | (value: T[]) => void | - | 当 CheckboxGroup 的值发生变化时触发回调函数。 |
| orientation | 'horizontal'|'vertical' | 'horizontal' | CheckboxGroup 的排列方向。 |
| as | ElementType | 'div' | CheckboxGroup 的根元素组件。 |
| className | ClassValue | - | 用于根元素的 className。 |
| ref | Ref | - | 用于转发根元素的 ref。 |
| sx | Interpolation | - | 用于根元素的 sx 属性。 |
| classes | Partial<Record<Slots, ClassValue>> | - | CheckboxGroup Slots 的 className。 |
| slotProps | Partial<Record<Slots, ComponentProps>> | - | CheckboxGroup Slots 的 props。 |
CheckboxGroup Slots
| Slot Name | Class Name | Default Component | Description |
|---|---|---|---|
| label | .nui-checkbox-group-label | 'h3' | CheckboxGroup 的标签。 |
| wrapper | .nui-checkbox-group-wrapper | 'div' | CheckboxGroup 中所有 Checkbox 的容器。 |
最后更新时间