Radio Group

Radio Group

한 번에 하나만 선택할 수 있는 상호작용 라디오 버튼 묶음이에요.

출처: 문서

본문

여러 옵션 중에서 하나만 선택해야 할 때 사용하는 라디오 버튼 그룹이에요.

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

이 컴포넌트는 Radio Group primitive의 props를 상속받으며, 공통 margin props를 지원해요.

Root

라디오 그룹의 모든 부분을 감싸요.

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

RadioGroup.Item을 Text 안에 구성하면 첫 번째 텍스트 줄과 자동으로 수직 가운데 정렬돼요.

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

더 알아보기 (Learn more)

• 여러 개의 상호배타적인 옵션 중 하나를 고를 때, 양식에 적합한 선택 컴포넌트예요.