广播组
@gridui/radio-group 拥有 RadioGroup, Radio, RadioCard 作为一个
single-selection家庭。从包根目录导入并加载
@gridui/radio-group/styles.css 后 @gridui/theme/styles.css.
需要React和React DOM 19.2或更高版本,以匹配共享表单
生命周期的合同。该包不依赖于应用程序布局。
选择及表格
RadioGroup 保留字符串 value / onValueChange 对于受控状态和
defaultValue 对于地方政府来说。 onValueChange(value, details) 接待本地人
details.event; details.cancel() 防止不受控制的选择更新。
受控调用方拥有自己的状态,并且不能提交已取消的更改。
激活已选中的项不会触发值更改。
共享事件协议来自 @gridui/interaction.
小组前进 name, form, required, disabled,方向,循环,refs,
以及本地可访问性道具。 readOnly 允许焦点不改变
选择。项也尊重禁用的字段集。原生表单重置恢复
初始不受控制的值,除非重置事件被取消;控制电话
重置自己的状态。Radix拥有无线电语义、隐藏表单输入和键盘
导航。提供独立于项目标签的可访问组名。
import { Radio, RadioGroup } from "@gridui/radio-group";
<RadioGroup name="delivery" defaultValue="standard" aria-label="Delivery service">
<label><Radio value="standard" /> Standard delivery</label>
<label><Radio value="express" /> Express delivery</label>
</RadioGroup>
使用舒适的可见标签打击区域紧凑 Radio 控制。 Radio
和 RadioCard 可以共存于一个组中,并共享相同的选择上下文。
丰富的选择
RadioCard 添加必需的 label、可选 description,可选装饰
leading 节点, variant="outlined" | "plain" 来 RadioProps(不包括
asChild. 默认值为 outlined. 卡片仍然是原生的单选按钮,而不是链接
或者独立管理的开关。选择、表单所有权和回调保留
在 RadioGroup;卡片不拥有列或第二个选择模型。
标签和描述具有单独生成的关联。显式的
aria-label 或者 aria-labelledby 覆盖生成的名称。提供
aria-describedby 与描述关联相结合。 leading 是
隐藏在辅助技术之外,必须具有装饰性。保持每个槽空闲
嵌套的链接、按钮和输入;基本信息属于标签或
描述。所有插槽接受措辞内容。当地的裁判指着收音机
按钮,调用者单击/焦点处理程序可以阻止选择请求。
<RadioGroup defaultValue="standard" aria-label="Delivery service">
<RadioCard value="standard" label="Standard delivery"
description="Delivered in three to five working days." />
<RadioCard value="express" label="Express delivery"
description="Delivered on the next working day." />
</RadioGroup>
共享网格边界
轮廓变体拥有其功能边界。普通变体不添加外部
边境申报,所以 GridItem asChild 保留其结构接缝。它
不适用 border: 0,检查网格内部,或推断封闭布局。
两个变体都保留主题背景,因此网格接缝表面不会显示
通过卡体。
RadioGroup asChild 将布局委托给它的子节点,而不强制执行组的布局
默认的垂直伸缩安排。Grid仍然负责响应轨道,
共享边界和可选的单元格填充。
独立卡默认使用spacing令牌 16. 当与 GridItem asChild,
GridItem的填充优先,包括0和响应值;
不管Grid和Radio-group样式表的顺序如何。呼叫者间隔公用事业
可以覆盖任意一个值。RadioCard不依赖Grid来应用此默认值。
import { Grid, GridItem } from "@gridui/grid";
import { RadioCard, RadioGroup } from "@gridui/radio-group";
<RadioGroup asChild defaultValue="standard" aria-label="Delivery service">
<Grid columns={{ base: 1, md: 2 }} frame="cells">
<GridItem asChild padding={16}>
<RadioCard value="standard" variant="plain" label="Standard"
description="Three to five working days." />
</GridItem>
<GridItem asChild padding={16}>
<RadioCard value="express" variant="plain" label="Express"
description="Next working day." />
</GridItem>
</Grid>
</RadioGroup>
迁移
进口 Radio, RadioGroup,以及他们的道具类型 @gridui/radio-group
而不是 @gridui/controls,并加载新的样式表。不再控制
包含或重新输出此家族。现有值、回调、引用、表单、
只读行为和键盘契约仍然可用。