OptionCard
옵션마다 차이가 분명한 큰 선택 카드.
- 라이브러리 전용
개요
미리보기
예시
상태
선택 안 함
선택됨
비활성
추가 비용 줄
가장 긴 문구 (es)
쓰임 예
체크박스
이렇게 · 이렇게 하지 않기
- 이렇게 요금제나 내보내기 형식처럼 비교가 필요한 선택에 쓴다. 같은 name으로 <fieldset><legend>에 묶는다.
- 이렇게 하지 않기 유료 옵션을 미리 골라 두지 않는다.
- 이렇게 하지 않기 카드 안 설명은 차이만 쓰고 과장 문구를 넣지 않는다. “가장 인기”, “추천” 배지를 달지 않는다.
- 이렇게 21st 참고: Choicebox(halaska-studio, 제목·설명·오른쪽 meta), Choice Cards(felipemenezes098, 추가 비용), Reshaped Radio(reshaped, 네이티브 input). 대부분의 후보가 role="radio" 버튼을 쓰지만 우리는 네이티브 input을 표식으로 보인다. 체크 시 scale 등장 애니메이션은 버렸다.
토큰과 속성
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
type? | 'radio' | 'checkbox' | radio | radio = 여럿 중 하나(같은 name, <fieldset> 안). checkbox = 따로 켜는 추가 항목. |
checked? | boolean | false | onChange가 있으면 제어 값, 없으면 처음 값(defaultChecked). 유료 옵션을 미리 켜 두지 않는다. |
disabled? | boolean | false | 고를 수 없음. 이유를 detail에 쓴다. |
title | ReactNode | PDF | 카드 라벨이자 입력의 접근 이름. 짧고 사실대로. |
detail? | ReactNode | 인쇄와 공유에 맞는 고정 레이아웃. 신뢰 라벨이 그대로 들어가요. | 이 옵션이 다른 점만 쓴다. aria-describedby로 연결된다. 비우면 없음. |
meta? | ReactNode | | 오른쪽 사실 한 줄(추가 비용 등). 설명으로도 연결된다. |
children? | ReactNode | — | 설명 아래 추가 내용(블록 가능). PlanCard가 가격과 기능 목록을 여기에 둔다. |
ref | — | — | ref는 네이티브 <input>으로 전달된다. |
<fieldset><legend> | — | — | 묶음은 부르는 쪽이 만든다. radio는 화살표, checkbox는 Space(네이티브). |
| 그 밖의 속성 | — | — | name, value, onChange, required, aria-* 등 네이티브 input 속성은 입력으로 전달된다. id를 주면 라벨 연결에 쓴다. className·style은 받지 않는다. |
접근성
키보드: radio: Tab으로 묶음에 들어가고 화살표로 고른다. checkbox: Tab, Space.
- 라벨을 카드 전체로 늘려 어디를 눌러도 선택된다. 초점 링은 카드 테두리에 그린다(:has(:focus-visible)).
- 선택은 표식 + 테두리로 보인다(색만이 아님). forced-colors에서는 Highlight 테두리.
- 설명·추가 비용·추가 내용은 aria-describedby로 이어진다. 모션: 테두리 색 fast.