Themes
Advanced
Utils
Components

Radio

독립형 라디오 버튼으로 어떤 레이아웃에서도 사용할 수 있습니다.

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 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="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 prop을 사용하여 라디오 버튼의 시각적 스타일을 제어합니다.

<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 prop을 사용하여 특정 색상을 지정합니다.

<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 prop을 사용하여 배경과의 색상 대비를 높입니다.

<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

Radio를 Text 내에서 조합하면 첫 번째 텍스트 줄과 자동으로 중앙 정렬됩니다. 여러 줄의 텍스트와도 잘 정렬됩니다.

<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 속성을 사용하여 라디오 버튼을 비활성화합니다.

<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>
PreviousProgress
NextRadio Group
Edit this page on GitHub.