示例
直接操作示例,查看组件在具体任务中的状态与反馈。
发布方式
日志保留时长
水平
垂直
使用建议
只处理互斥答案
当用户必须从少量、可同时比较的答案中选一项时使用 RadioGroup。
为分组提供名称
通过可见标题或 aria-label 命名整个分组;每个选项标签应保持简洁且不重复组名。
方向服从内容长度
短选项可以水平排列,包含描述或长文案时采用纵向排列以保留扫读顺序。
引入方式
从已验证的公开子路径导入组件;全局样式接入方式见安装指南。
import { BaseRadioGroup } from '@inf-monkeys-tech/monkeys-design/components/base';当前限制
- RadioGroup 不负责异步加载、选项搜索或跨页保留;动态选项集合与提交策略由宿主管理。
- Deterministic visual evidence and final packed React 18/19 checks are pending T17/T23.
API
查看组件源码export interface BaseRadioGroupProps
extends Omit<
HTMLAttributes<HTMLDivElement>,
'children' | 'className' | 'defaultValue' | 'onChange' | 'style'
> {
options?: BaseRadioOption[];
value?: string;
defaultValue?: string;
name?: string;
form?: string;
orientation?: 'horizontal' | 'vertical';
required?: boolean;
invalid?: boolean;
disabled?: boolean;
controlSize?: BaseControlSize;
appearance?: BaseAppearance;
className?: string;
classNames?: BaseRadioGroupClassNames;
style?: CSSProperties;
children?: ReactNode;
onChange?: ChangeEventHandler<HTMLInputElement>;
onValueChange?: (value: string, event: ChangeEvent<HTMLInputElement>) => void;
}| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
options | 组件可供选择的选项列表。 | BaseRadioOption[] | [] |
value | 单选组当前选中选项的受控值。 | string | — |
defaultValue | 非受控模式下使用的初始值。 | string | — |
name | 提交表单时使用的字段名称。 | string | — |
form | 该字段关联的 form 元素 id。 | string | — |
orientation | 内容或交互项的排列方向。 | 'horizontal' | 'vertical' | 'vertical' |
required | 是否将该字段标记为必填。 | boolean | false |
invalid | 是否进入无效状态并应用相应的校验样式与语义。 | boolean | false |
disabled | 是否禁用该组件及其可交互行为。 | boolean | false |
controlSize | 内部表单控件使用的预设尺寸。 | BaseControlSize | — |
appearance | 覆盖组件使用的外观令牌或局部样式配置。 | BaseAppearance | — |
className | 追加到组件根元素的 CSS 类名。 | string | — |
classNames | 按组件公开的结构插槽分别追加 CSS 类名。 | BaseRadioGroupClassNames | — |
style | 追加到组件根元素的内联样式。 | CSSProperties | — |
children | 在 BaseRadioGroup 内渲染的子内容;支持渲染函数时以对应的 Props 类型为准。 | ReactNode | — |
onChange | 底层输入事件发生时调用的原生变更回调。 | ChangeEventHandler<HTMLInputElement> | — |
onValueChange | 值变化时调用的回调;参数结构以当前组件的 Props 类型为准。 | (value: string, event: ChangeEvent<HTMLInputElement>) => void | — |