RadioGroup
RadioGroup 允许用户从一组中选择一个项目。
Usage
Select a fruit
Disabled
Select a fruit
Colors
Select a color
Sizes
使用 size 属性可以设置 RadioGroup 的大小，默认为 md。
Select a fruit
Select a fruit
Select a fruit
Default Value
使用 defaultValue 属性可以设置 RadioGroup 的默认选中项。
Select a fruit
Vertical
使用 orientation 属性可以设置 RadioGroup 的排列方向，默认为 horizontal。
Select a fruit
Controlled
使用 value 和 onValueChange 属性可以控制 Radio 的值。
Select a fruit
Selected: apple
API
Radio Props
Radio 继承 as (默认为 'input') 的 Props。
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | Radio 的标签。 |
| color | 'blue'|'orange'|'yellow'|'cyan'|'red'|'green'|'pink'|'purple'|'gray' | 'blue' | Radio 的颜色。 |
| size | 'sm'|'md'|'lg' | 'md' | Radio 的大小。 |
| disabled | boolean | false | Radio 是否禁用。 |
| checked | boolean | - | Radio 是否选中。(受控) |
| defaultChecked | boolean | - | Radio 是否默认选中。（非受控） |
| className | ClassValue | - | 用于根元素的 className。 |
| name | string | - | Radio 的 name。 |
| value | string|number | - | Radio 的 value。 |
| ref | Ref | - | 用于转发 Radio 内的 input。 |
| onChange | (event: ChangeEvent<HTMLInputElement>) => void | - | 当 Radio 状态发生变化时会触发该回调函数。 |
| onCheckedChange | (checked: boolean) => void | - | 当 Radio 状态发生变化时会触发该回调函数。 |
| as | ElementType | 'input' | 用于 Radio 内 input 的组件。可以是表示 HTML 元素的字符串，也可以是一个组件。 |
| sx | Interpolation | - | 用于根元素的 sx 属性。 |
| classNames | Partial<Record<Slots, ClassValue>> | - | Radio Slots 的 className。 |
| slotProps | Partial<Record<Slots, ComponentProps>> | - | Radio Slots 的 props。 |
Radio Slots
| Slot Name | Class Name | Default Component | Description |
|---|---|---|---|
| root | .nui-radio-root | 'label' | Radio 的根元素。 |
| dot | .nui-radio-dot | 'span' | Radio 内表示圆圈的元素。 |
| label | .nui-radio-label | 'span' | Radio 的标签元素。 |
RadioGroup Props
RadioGroup 继承 as (默认为 'div') 的 Props。
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | - | RadioGroup 的子元素，通常为 Radio 组件。 |
| label | ReactNode | - | RadioGroup 的标签。 |
| disabled | boolean | - | RadioGroup 是否禁用。 |
| name | string | - | RadioGroup 的 name。 |
| color | 'blue'|'orange'|'yellow'|'cyan'|'red'|'green'|'pink'|'purple'|'gray' | - | RadioGroup 的颜色。 |
| size | 'sm'|'md'|'lg' | - | RadioGroup 的大小。 |
| value | T extends string | number | - | RadioGroup 指定选中的值。(受控) |
| defaultValue | T extends string | number | - | RadioGroup 默认选中的值。(非受控) |
| onValueChange | (value: T) => void | - | 当 RadioGroup 的值发生变化时触发回调函数。 |
| orientation | 'horizontal'|'vertical' | 'horizontal' | RadioGroup 的排列方向。 |
| as | ElementType | 'div' | RadioGroup 的根元素组件。 |
| className | ClassValue | - | 用于根元素的 className。 |
| ref | Ref | - | 用于转发根元素的 ref。 |
| sx | Interpolation | - | 用于根元素的 sx 属性。 |
| classNames | Partial<Record<Slots, ClassValue>> | - | RadioGroup Slots 的 className。 |
| slotProps | Partial<Record<Slots, ComponentProps>> | - | RadioGroup Slots 的 props。 |
RadioGroup Slots
| Slot Name | Class Name | Default Component | Description |
|---|---|---|---|
| label | .nui-radio-group-label | 'h3' | RadioGroup 的标签元素。 |
| wrapper | .nui-radio-group-wrapper | 'div' | RadioGroup 中所有 Radio 的容器元素。 |
最后更新时间