Radix Homepage
Radix Homepage
主题主题基础组件基础组件图标图标颜色颜色
文档演练博客
Components

单选按钮

可在任何布局中使用的独立单选按钮。

View sourceReport an issueView in Playground
<Flex align="start" direction="column" gap="1">

	<Flex asChild gap="2">

		<Text as="label" size="2">

			<Radio name="example" value="1" defaultChecked />

			Default

		</Text>

	</Flex>



	<Flex asChild gap="2">

		<Text as="label" size="2">

			<Radio name="example" value="2" />

			Comfortable

		</Text>

	</Flex>



	<Flex asChild gap="2">

		<Text as="label" size="2">

			<Radio name="example" value="3" />

			Compact

		</Text>

	</Flex>

</Flex>

API 参考

¥API Reference

此组件继承了 单选按钮组基础组件 的属性并支持 常用边距属性。

¥This component inherits props from the Radio Group primitive and supports common margin props.

根

¥Root

包含单选按钮组的所有部分。

¥Contains all the parts of a radio group.

PropTypeDefault
asChild
boolean
No default value
size
Responsive<"1" | "2" | "3">
"2"
variant
"classic" | "surface" | "soft"
"surface"
color
enum
No default value
highContrast
boolean
No default value

项目

¥Item

组中可勾选的项目。

¥An item in the group that can be checked.

示例

¥Examples

尺寸

¥Size

使用 size 属性控制单选按钮的大小。

¥Use the size prop to control the radio button size.

<Flex align="center" gap="4">

	<Flex gap="2">

		<Radio size="1" name="size-1" value="1" defaultChecked />

		<Radio size="1" name="size-1" value="2" />

	</Flex>



	<Flex gap="2">

		<Radio size="2" name="size-2" value="1" defaultChecked />

		<Radio size="2" name="size-2" value="2" />

	</Flex>



	<Flex gap="2">

		<Radio size="3" name="size-3" value="1" defaultChecked />

		<Radio size="3" name="size-3" value="2" />

	</Flex>

</Flex>

变体

¥Variant

使用 variant 属性控制单选按钮的视觉样式。

¥Use the variant prop to control the visual style of the radio buttons.

<Flex align="center" gap="4">

	<Flex gap="2">

		<Radio variant="surface" name="surface" value="1" defaultChecked />

		<Radio variant="surface" name="surface" value="2" />

	</Flex>



	<Flex gap="2">

		<Radio variant="classic" name="classic" value="1" defaultChecked />

		<Radio variant="classic" name="classic" value="2" />

	</Flex>



	<Flex gap="2">

		<Radio variant="soft" name="soft" value="1" defaultChecked />

		<Radio variant="soft" name="soft" value="2" />

	</Flex>

</Flex>

颜色

¥Color

使用 color 属性指定特定的 color。

¥Use the color prop to assign a specific color.

<Flex as="span" gap="2">

	<Radio color="indigo" defaultChecked />

	<Radio color="cyan" defaultChecked />

	<Radio color="orange" defaultChecked />

	<Radio color="crimson" defaultChecked />

</Flex>

高对比度

¥High-contrast

使用 highContrast 属性增加与背景的颜色对比度。

¥Use the highContrast prop to increase color contrast with the background.

<Grid columns="5" display="inline-grid" gap="2">

	<Radio color="indigo" defaultChecked />

	<Radio color="cyan" defaultChecked />

	<Radio color="orange" defaultChecked />

	<Radio color="crimson" defaultChecked />

	<Radio color="gray" defaultChecked />



	<Radio color="indigo" defaultChecked highContrast />

	<Radio color="cyan" defaultChecked highContrast />

	<Radio color="orange" defaultChecked highContrast />

	<Radio color="crimson" defaultChecked highContrast />

	<Radio color="gray" defaultChecked highContrast />

</Grid>

对齐方式

¥Alignment

在 Text 中组合 Radio，会自动将其与第一行文本居中。它还能自动与多行文本对齐。

¥Composing Radio within Text automatically centers it with the first line of text. It is automatically well-aligned with multi-line text too.

<Flex direction="column" gap="3">

	<Flex align="start" direction="column" gap="1">

		<Flex asChild gap="2">

			<Text as="label" size="2">

				<Radio size="1" name="alignment-1" value="1" defaultChecked />

				Default

			</Text>

		</Flex>

		<Flex asChild gap="2">

			<Text as="label" size="2">

				<Radio size="1" name="alignment-1" value="2" />

				Compact

			</Text>

		</Flex>

	</Flex>



	<Flex align="start" direction="column" gap="1">

		<Flex asChild gap="2">

			<Text as="label" size="3">

				<Radio size="2" name="alignment-2" value="1" defaultChecked />

				Default

			</Text>

		</Flex>

		<Flex asChild gap="2">

			<Text as="label" size="3">

				<Radio size="2" name="alignment-2" value="2" />

				Compact

			</Text>

		</Flex>

	</Flex>



	<Flex align="start" direction="column" gap="1">

		<Flex asChild gap="2">

			<Text as="label" size="4">

				<Radio size="3" name="alignment-3" value="1" defaultChecked />

				Default

			</Text>

		</Flex>

		<Flex asChild gap="2">

			<Text as="label" size="4">

				<Radio size="3" name="alignment-3" value="2" />

				Compact

			</Text>

		</Flex>

	</Flex>

</Flex>

已禁用

¥Disabled

使用原生 disabled 属性创建禁用的单选按钮。

¥Use the native disabled attribute to create a disabled radio button.

<Flex direction="column" gap="3">

	<Flex align="start" direction="column" gap="1">

		<Flex asChild gap="2">

			<Text as="label" size="2">

				<Radio name="enabled" value="1" defaultChecked />

				On

			</Text>

		</Flex>

		<Flex asChild gap="2">

			<Text as="label" size="2">

				<Radio name="enabled" value="2" />

				Off

			</Text>

		</Flex>

	</Flex>



	<Flex align="start" direction="column" gap="1">

		<Flex asChild gap="2">

			<Text as="label" size="2" color="gray">

				<Radio disabled name="disabled" value="1" defaultChecked />

				On

			</Text>

		</Flex>

		<Flex asChild gap="2">

			<Text as="label" size="2" color="gray">

				<Radio disabled name="disabled" value="2" />

				Off

			</Text>

		</Flex>

	</Flex>

</Flex>
Previous进度
Next单选按钮组