Radio Card

Radio Card (라디오 카드)

Radio Card는 목록에서 옵션 하나를 선택할 때 사용하는 컴포넌트예요. 카드 형태로 각 옵션을 보여주면서 선택할 수 있게 해줘요.

출처: 문서

본문

사용법 (Usage)

import { RadioCard } from "@chakra-ui/react"

<RadioCard.Root>
  <RadioCard.Label />
  <RadioCard.Item>
    <RadioCard.ItemHiddenInput />
    <RadioCard.ItemControl>
      <RadioCard.ItemContent>
        <RadioCard.ItemText />
        <RadioCard.ItemDescription />
      </RadioCard.ItemContent>
      <RadioCard.ItemIndicator />
    </RadioCard.ItemControl>
  </RadioCard.Item>
</RadioCard.Root>

:::info

클로즈드 컴포넌트 구성(closed component composition)을 선호한다면, 아래의 스니펫을 확인하세요.

:::

예시 (Examples)

설명 (Description)

라디오 카드에 추가 설명을 넣는 예시예요.

크기 (Sizes)

RadioCard.Root 컴포넌트에 size prop을 전달해 라디오 카드의 크기를 바꿀 수 있어요.

색상 (Colors)

RadioCard.Root 컴포넌트에 colorPalette prop을 전달해 라디오 카드의 색상을 바꿀 수 있어요.

변형 (Variants)

RadioCard.Root 컴포넌트에 variant prop을 전달해 라디오 카드의 시각적 스타일을 바꿀 수 있어요.

아이콘 (Icon)

RadioCard.ItemContent 안에 커스텀 아이콘을 배치해 라디오 카드 안에 렌더링할 수 있어요.

Controlled

RadioCard.Root 컴포넌트에 value와 onValueChange props를 전달해 선택된 라디오 카드를 제어할 수 있어요.

인디케이터 없음 (No Indicator)

인디케이터 없이 라디오 카드를 사용하는 예시예요.

인디케이터 없음 (세로) (No Indicator, Vertical)

인디케이터가 없고 콘텐츠가 세로로 정렬된 라디오 카드 예시예요.

반응형 방향 (Responsive Orientation)

반응형 방향에는 useBreakpointValue를 사용하세요 — orientation prop은 반응형 객체 표기법을 지원하지 않아요.

:::note

대안으로, RadioCard.Root 인스턴스 두 개(가로형 하나, 세로형 하나)를 렌더링하고 CSS display로 브레이크포인트에 따라 show/hide 할 수도 있어요.

:::

중앙 정렬 (Centered)

텍스트가 중앙 정렬된 라디오 카드 예시예요.

컴포지션 (Composition)

RadioCard를 Group 컴포넌트와 함께 구성(compose)하는 예시예요.

애드온 (Addon)

RadioCard.ItemAddon 컴포넌트를 사용해 라디오 카드에 메타데이터를 추가할 수 있어요.

클로즈드 컴포넌트 (Closed Component)

클로즈드 컴포넌트 구성을 위해 Radio card를 설정하는 방법을 보여줘요.

프로젝트에 클로즈드 컴포넌트를 자동으로 추가하려면 다음 명령을 실행하세요:

npx @chakra-ui/cli snippet add radio-card

사용 방법은 다음과 같아요:

<RadioCardRoot>
  <RadioCardLabel />
  <RadioCardItem />
</RadioCardRoot>

Props

RadioCard의 Root 파트에서 사용 가능한 props는 공식 문서에서 확인할 수 있어요.