라디오

라디오 (Radio)

어떤 레이아웃에서든 사용할 수 있는 독립형 라디오 버튼이에요. input 요소 기반으로 만들어졌어요.

출처: 문서

본문

어떤 레이아웃에서든 사용할 수 있는 독립형 라디오 버튼이에요.

<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

이 컴포넌트는 input 요소를 기반으로 하며 공통 margin props를 지원해요.

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

예제 (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으로 특정 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 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>

더 알아보기 (Learn more)