Themes
Advanced
Utils
Components

Radio Group

한 번에 하나만 선택할 수 있는 라디오 버튼 세트입니다.

View sourceReport an issueView in Playground
<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>

API Reference

이 컴포넌트는 Radio Group primitive의 props를 상속받으며 common margin props를 지원합니다.

Root

라디오 그룹의 모든 부분을 포함하는 컨테이너입니다.

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

그룹에서 선택할 수 있는 항목입니다.

Examples

Size

size prop을 사용하여 라디오 버튼의 크기를 제어합니다.

<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

variant prop을 사용하여 시각적 스타일을 제어합니다.

<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

color prop을 사용하여 특정 색상을 지정합니다.

<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>

High-contrast

highContrast prop을 사용하여 배경과의 색상 대비를 높입니다.

<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>

Alignment

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

기본 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>
PreviousRadio
NextRadio Cards
Edit this page on GitHub.