PlanCard
요금제 비교 카드. 현재 플랜 표시.
- 라이브러리 전용
개요
미리보기
예시
상태
기본
선택
현재 플랜
비활성
가장 긴 문구 (es)
쓰임 예
USD · 세금 별도
이렇게 · 이렇게 하지 않기
- 이렇게 요금제마다 무엇을 하는지 사실로만 쓴다. 현재 플랜은 글자로 표시한다.
- 이렇게 하지 않기 “가장 인기”, “추천” 같은 과장 배지나 강조 테두리를 쓰지 않는다. 한 요금제를 미리 골라 두지 않는다(현재 플랜 제외).
- 이렇게 하지 않기 월 가격을 연 가격처럼 보이게 나누어 쓰지 않는다. 연 결제면 연 합계를 쓴다.
- 이렇게 21st 참고: Pricing Plan Radio Cards(sean0205), Radio Group with Plan Cards(shadcnspace), Pricing(kevingirelli). Pricing Plan Card(cnippet-dev)의 “Most Popular” 배지와 강조 링은 의도적으로 뺐다.
토큰과 속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
title | ReactNode | 개인 | 요금제 이름. 라디오의 접근 이름이 된다. name은 네이티브 묶음 이름으로 남는다. |
description? | ReactNode | 여러 출처를 연결하고 내보내기를 써요. | 무엇을 위한 요금제인지 사실 한 문장. |
amount | number | — | Price와 같다. 미리보기 표본 9900. |
currency? | 'KRW' | 'USD' | 'CNY' | 'EUR' | KRW | Price와 같다. |
period? | 'month' | 'year' | 'once' | month | Price와 같다. |
taxIncluded? | boolean | true | Price와 같다. 세금 여부는 항상 글자로. |
features | readonly ReactNode[] | — | 요금제가 하는 일을 사실로. 미리보기는 표본 4개. |
current? | boolean | false | 지금 쓰는 요금제. 이름 옆에 “현재 플랜”을 글자로 쓴다. |
checked? | boolean | false | OptionCard와 같다(onChange가 있으면 제어). |
disabled? | boolean | false | 고를 수 없음. 이유를 description에 쓴다. |
| 그 밖의 속성 | — | — | name(묶음), value, onChange, aria-* 등 네이티브 input 속성은 라디오로 전달된다. className·style은 받지 않는다. |
접근성
키보드: OptionCard(radio)와 같다: Tab으로 묶음에 들어가 화살표로 고른다.
- 라디오 이름 = 요금제 이름. 현재 플랜·가격·세금·기능 목록은 aria-describedby로 이어진다.
- “현재 플랜”은 색 배지가 아니라 테두리 있는 글자라서 forced-colors에서도 남는다.