Radio Cards

Radio Cards

한 번에 하나만 선택할 수 있는 상호작용 카드 묶음이에요.

출처: 문서

본문

라디오 버튼처럼 동작하되, 카드 형태로 더 넓은 영역을 클릭할 수 있게 해 주는 선택지 집합이에요. 주로 플랜이나 옵션을 고를 때 사용해요.

<Box maxWidth="600px">
  <RadioCards.Root defaultValue="1" columns={{ initial: "1", sm: "3" }}>
    <RadioCards.Item value="1">
      <Flex direction="column" width="100%">
        <Text weight="bold">8-core CPU</Text>

        <Text>32 GB RAM</Text>
      </Flex>
    </RadioCards.Item>

    <RadioCards.Item value="2">
      <Flex direction="column" width="100%">
        <Text weight="bold">6-core CPU</Text>

        <Text>24 GB RAM</Text>
      </Flex>
    </RadioCards.Item>

    <RadioCards.Item value="3">
      <Flex direction="column" width="100%">
        <Text weight="bold">4-core CPU</Text>

        <Text>16 GB RAM</Text>
      </Flex>
    </RadioCards.Item>
  </RadioCards.Root>
</Box>

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

Root

Prop Type Default
asChild boolean No default value
size Responsive<"1" | "2" | "3"> "2"
variant "surface" | "classic" "surface"
color enum No default value
highContrast boolean No default value
columns Responsive<enum | string> "repeat(auto-fit, minmax(160px, 1fr))"
gap Responsive<enum | string> "4"

Item

선택할 수 있는 그룹 안의 항목이에요.

예시 (Examples)

Size

size prop으로 크기를 제어할 수 있어요.

<Flex align="center" gap="3">
  <RadioCards.Root size="1">
    <RadioCards.Item value="1">8-core CPU</RadioCards.Item>
  </RadioCards.Root>

  <RadioCards.Root size="2">
    <RadioCards.Item value="1">8-core CPU</RadioCards.Item>
  </RadioCards.Root>

  <RadioCards.Root size="3">
    <RadioCards.Item value="1">8-core CPU</RadioCards.Item>
  </RadioCards.Root>
</Flex>

Variant

variant prop으로 시각적 스타일을 제어할 수 있어요.

<Flex direction="column" gap="3" maxWidth="200px">
  <RadioCards.Root variant="surface">
    <RadioCards.Item value="1">8-core CPU</RadioCards.Item>
  </RadioCards.Root>

  <RadioCards.Root variant="classic">
    <RadioCards.Item value="1">8-core CPU</RadioCards.Item>
  </RadioCards.Root>
</Flex>

Color

color prop으로 특정 색상을 지정할 수 있어요.

<Flex direction="column" gap="3" maxWidth="200px">
  <RadioCards.Root defaultValue="1" color="indigo">
    <RadioCards.Item value="1">8-core CPU</RadioCards.Item>
  </RadioCards.Root>

  <RadioCards.Root defaultValue="1" color="cyan">
    <RadioCards.Item value="1">8-core CPU</RadioCards.Item>
  </RadioCards.Root>

  <RadioCards.Root defaultValue="1" color="orange">
    <RadioCards.Item value="1">8-core CPU</RadioCards.Item>
  </RadioCards.Root>

  <RadioCards.Root defaultValue="1" color="crimson">
    <RadioCards.Item value="1">8-core CPU</RadioCards.Item>
  </RadioCards.Root>
</Flex>

High-contrast

highContrast prop으로 배경과의 색 대비를 높일 수 있어요.

<Grid columns="2" gap="3" display="inline-grid">
  <RadioCards.Root defaultValue="1" color="indigo">
    <RadioCards.Item value="1">8-core CPU</RadioCards.Item>
  </RadioCards.Root>

  <RadioCards.Root defaultValue="1" color="indigo" highContrast>
    <RadioCards.Item value="1">8-core CPU</RadioCards.Item>
  </RadioCards.Root>

  <RadioCards.Root defaultValue="1" color="cyan">
    <RadioCards.Item value="1">8-core CPU</RadioCards.Item>
  </RadioCards.Root>

  <RadioCards.Root defaultValue="1" color="cyan" highContrast>
    <RadioCards.Item value="1">8-core CPU</RadioCards.Item>
  </RadioCards.Root>

  <RadioCards.Root defaultValue="1" color="orange">
    <RadioCards.Item value="1">8-core CPU</RadioCards.Item>
  </RadioCards.Root>

  <RadioCards.Root defaultValue="1" color="orange" highContrast>
    <RadioCards.Item value="1">8-core CPU</RadioCards.Item>
  </RadioCards.Root>

  <RadioCards.Root defaultValue="1" color="crimson">
    <RadioCards.Item value="1">8-core CPU</RadioCards.Item>
  </RadioCards.Root>

  <RadioCards.Root defaultValue="1" color="crimson" highContrast>
    <RadioCards.Item value="1">8-core CPU</RadioCards.Item>
  </RadioCards.Root>
</Grid>

Disabled

<Flex direction="column" gap="4" maxWidth="450px">
  <RadioCards.Root columns="2" defaultValue="2">
    <RadioCards.Item value="1">Off</RadioCards.Item>

    <RadioCards.Item value="2">On</RadioCards.Item>
  </RadioCards.Root>

  <RadioCards.Root columns="2" defaultValue="2">
    <RadioCards.Item value="1" disabled>
      Off
    </RadioCards.Item>

    <RadioCards.Item value="2" disabled>
      On
    </RadioCards.Item>
  </RadioCards.Root>
</Flex>

더 알아보기 (Learn more)

  • 여러 개의 카드를 격자로 배치해 한 번에 하나만 고르게 하고 싶을 때 적합해요.