一组交互式单选按钮，一次只能选择一个。
<RadioGroup.Root defaultValue="1" name="example">
<RadioGroup.Item value="1">Default</RadioGroup.Item>
<RadioGroup.Item value="2">Comfortable</RadioGroup.Item>
<RadioGroup.Item value="3">Compact</RadioGroup.Item>
</RadioGroup.Root>
此组件继承自 单选组基元 并支持 常见 margin 属性。
包含单选组的所有部分。
| 属性 | 类型 | 默认 |
|---|---|---|
asChild | 布尔值 | 无默认值 |
size | 响应式<"1" | "2" | "3"> | "2" |
variant | "classic" | "surface" | "soft" | "surface" |
color | 枚举 | 无默认值 |
highContrast | 布尔值 | 无默认值 |
组中可以被选中的项目。
使用 size 属性控制单选按钮的大小。
<Flex align="center" gap="2">
<RadioGroup.Root size="1" defaultValue="1">
<RadioGroup.Item value="1" />
</RadioGroup.Root>
<RadioGroup.Root size="2" defaultValue="1">
<RadioGroup.Item value="1" />
</RadioGroup.Root>
<RadioGroup.Root size="3" defaultValue="1">
<RadioGroup.Item value="1" />
</RadioGroup.Root>
</Flex>
使用 variant 属性控制单选按钮的视觉样式。
<Flex gap="2">
<Flex direction="column" asChild gap="2">
<RadioGroup.Root variant="surface" defaultValue="1">
<RadioGroup.Item value="1" />
<RadioGroup.Item value="2" />
</RadioGroup.Root>
</Flex>
<Flex direction="column" asChild gap="2">
<RadioGroup.Root variant="classic" defaultValue="1">
<RadioGroup.Item value="1" />
<RadioGroup.Item value="2" />
</RadioGroup.Root>
</Flex>
<Flex direction="column" asChild gap="2">
<RadioGroup.Root variant="soft" defaultValue="1">
<RadioGroup.Item value="1" />
<RadioGroup.Item value="2" />
</RadioGroup.Root>
</Flex>
</Flex>
使用 color 属性分配特定的 颜色。
<Flex gap="2">
<RadioGroup.Root color="indigo" defaultValue="1">
<RadioGroup.Item value="1" />
</RadioGroup.Root>
<RadioGroup.Root color="cyan" defaultValue="1">
<RadioGroup.Item value="1" />
</RadioGroup.Root>
<RadioGroup.Root color="orange" defaultValue="1">
<RadioGroup.Item value="1" />
</RadioGroup.Root>
<RadioGroup.Root color="crimson" defaultValue="1">
<RadioGroup.Item value="1" />
</RadioGroup.Root>
</Flex>
使用 highContrast 属性增加与背景的颜色对比度。
<Grid rows="2" gap="2" display="inline-grid" flow="column">
<RadioGroup.Root color="indigo" defaultValue="1">
<RadioGroup.Item value="1" />
</RadioGroup.Root>
<RadioGroup.Root color="indigo" defaultValue="1" highContrast>
<RadioGroup.Item value="1" />
</RadioGroup.Root>
<RadioGroup.Root color="cyan" defaultValue="1">
<RadioGroup.Item value="1" />
</RadioGroup.Root>
<RadioGroup.Root color="cyan" defaultValue="1" highContrast>
<RadioGroup.Item value="1" />
</RadioGroup.Root>
<RadioGroup.Root color="orange" defaultValue="1">
<RadioGroup.Item value="1" />
</RadioGroup.Root>
<RadioGroup.Root color="orange" defaultValue="1" highContrast>
<RadioGroup.Item value="1" />
</RadioGroup.Root>
<RadioGroup.Root color="crimson" defaultValue="1">
<RadioGroup.Item value="1" />
</RadioGroup.Root>
<RadioGroup.Root color="crimson" defaultValue="1" highContrast>
<RadioGroup.Item value="1" />
</RadioGroup.Root>
<RadioGroup.Root color="gray" defaultValue="1">
<RadioGroup.Item value="1" />
</RadioGroup.Root>
<RadioGroup.Root color="gray" defaultValue="1" highContrast>
<RadioGroup.Item value="1" />
</RadioGroup.Root>
</Grid>
在 Text 中组合 RadioGroup.Item 会自动将其与第一行文本居中对齐。
<Flex direction="column" gap="3">
<RadioGroup.Root size="1" defaultValue="1">
<Text as="label" size="2">
<Flex gap="2">
<RadioGroup.Item value="1" /> Default
</Flex>
</Text>
<Text as="label" size="2">
<Flex gap="2">
<RadioGroup.Item value="2" /> Compact
</Flex>
</Text>
</RadioGroup.Root>
<RadioGroup.Root size="2" defaultValue="1">
<Text as="label" size="3">
<Flex gap="2">
<RadioGroup.Item value="1" /> Default
</Flex>
</Text>
<Text as="label" size="3">
<Flex gap="2">
<RadioGroup.Item value="2" /> Compact
</Flex>
</Text>
</RadioGroup.Root>
<RadioGroup.Root size="3" defaultValue="1">
<Text as="label" size="4">
<Flex gap="2">
<RadioGroup.Item value="1" /> Default
</Flex>
</Text>
<Text as="label" size="4">
<Flex gap="2">
<RadioGroup.Item value="2" /> Compact
</Flex>
</Text>
</RadioGroup.Root>
</Flex>
它也会自动与多行文本对齐良好。
使用原生 disabled 属性创建禁用的单选按钮。
<Flex direction="column" gap="2">
<RadioGroup.Root defaultValue="2">
<RadioGroup.Item value="1">Off</RadioGroup.Item>
<RadioGroup.Item value="2">On</RadioGroup.Item>
</RadioGroup.Root>
<RadioGroup.Root defaultValue="2">
<RadioGroup.Item value="1" disabled>
Off
</RadioGroup.Item>
<RadioGroup.Item value="2" disabled>
On
</RadioGroup.Item>
</RadioGroup.Root>
</Flex>