RadioGroup 单选组

从一组互斥选项中做出一个明确选择。

Beta

示例

直接操作示例,查看组件在具体任务中的状态与反馈。

宿主分别保存发布方式和日志保留时长;每个分组只产生一个明确结果。
发布方式
当前发布方式:手动发布
日志保留时长
日志保留:30
水平排列用于短选项,垂直排列为描述性选择保留稳定阅读顺序。
水平
垂直
每个互斥选项可以补充影响说明,并保留不可选项的原因。
必填错误提示需要完成选择,整体禁用用于上游策略锁定。

使用建议

只处理互斥答案

当用户必须从少量、可同时比较的答案中选一项时使用 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.
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是否将该字段标记为必填。booleanfalse
invalid是否进入无效状态并应用相应的校验样式与语义。booleanfalse
disabled是否禁用该组件及其可交互行为。booleanfalse
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