| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
label | string | — | 라벨 텍스트. default 슬롯으로 대체 |
name | string | — | radio 그룹 name 속성 |
value | string | — | radio value 속성 |
checked | boolean | — | 제어 선택 상태. v-model:checked 지원 |
default-checked | boolean | false | 비제어 초기 선택 상태 |
disabled | boolean | false | 비활성 |
label-end | boolean | false | 라벨을 라디오 앞에 배치 |
button | boolean | false | 버튼형 (radio_button) |
aria-label | string | — | 라벨 없는 단독 라디오 시 필수 |
ripple | boolean | — | 클릭 파장(ripple). standalone·button 변형 기본 활성 · div 변형은 true일 때만 · false 비활성 |
Radio
단일 선택을 위한 Radio 컴포넌트입니다. 기본 너비는 인라인(콘텐츠)이며, radio_block · radio_group_block으로 전체 너비를 사용합니다.
유형
기본은 span.radio_control + label.radio_label for(명시 연결) 순서입니다. 보이는 레이블이 없으면 label.radio_control로 input을 암묵 연결합니다. radio_label-end는 레이블 → 라디오 순서이며, 기본 너비는 콘텐츠 기준입니다.
레이블 뒤
radio_label-end는 radio_label → radio_control 순으로 마크업합니다. 전체 너비가 필요하면 radio_block 또는 radio_group_block을 추가합니다.
기본
레이블과 보조 설명(radio_hint)을 함께 사용할 수 있습니다.
결제 수단
단독 사용
레이블 없이 라디오만 사용할 수 있습니다. aria-label로 접근 가능한 이름을 지정합니다.
크기
radio_sm · radio(기본) · radio_lg로 박스·텍스트 크기를 조절합니다.
너비
기본은 인라인(콘텐츠) 너비입니다. radio_block · radio_group_block으로 전체 너비를 사용합니다.
색상
color_primary(기본) · color_success · color_danger · color_warning으로 선택 색을 지정합니다.
상태
선택·미선택·비활성·오류(is-error) 상태를 지원합니다.
그룹
radio_group으로 여러 항목을 묶습니다. radio_group_horizontal로 가로 배치, radio_group_compact로 간격을 줄입니다.
버튼형
radio_button은 태그·필터 UI에 적합합니다. 크기·색상 변형과 함께 사용할 수 있습니다.
카드형
div.radio_card + article.card 조합입니다. card_extra에는 label.radio_control로 input을 암묵 연결합니다. 카드 전체를 눌러 선택하려면 div.radio_card.radio_card-clickable을 쓰고 클릭은 JS로 위임합니다. 접근 가능한 이름은 aria-labelledby로 card_title · card_body에 연결합니다.
폼 레이아웃
form_vertical · form_horizontal과 함께 사용합니다.
API · Props
API · Slots
| 슬롯 | 설명 |
|---|---|
default | 라벨 텍스트 (label prop 대체). radio_content · radio_hint 조합 가능 |
API · Events
| 이벤트 | 설명 |
|---|---|
update:checked | 선택 상태 변경 시. v-model:checked에 사용 |
change | 네이티브 input change 이벤트 |
클래스 · 속성
Vue 컴포넌트가 렌더하는 OOCSS 클래스입니다. HTML 마크업으로 직접 작성할 때 동일하게 조합합니다.
| 클래스 | 설명 |
|---|---|
radio | 라디오 래퍼 |
radio_control · radio_input · radio_box | 입력·커스텀 원 |
radio_label | 라벨 |
radio_label-end · radio_button | 레이아웃 변형 |
radio_group | fieldset 그룹 |
radio_card · radio_card-clickable | 카드형 — clickable은 data-ripple + JS 위임 |
data-ripple | 클릭 파장 활성. data-ripple="surface"는 절대 위치 보조 버튼용 |
data-ripple="false" | 해당 요소 ripple 비활성 |
data-no-ripple | 하위 전체 ripple 비활성 |
디자인 토큰
| 토큰 | 기본값 | 설명 |
|---|---|---|
--radio-size · --radio-size-sm · --radio-size-lg | var(--checkbox-size) · … · … | 라디오 원 크기 (checkbox 토큰 참조) |
--radio-gap · --radio-gap-sm · --radio-gap-lg | var(--checkbox-gap) · … · … | 라벨 간격 |
--radio-font-size · --radio-line-height | var(--checkbox-font-size) · var(--checkbox-line-height) | 라벨 타이포 |
--radio-label-weight · --radio-hint-size | var(--checkbox-label-weight) · var(--checkbox-hint-size) | 라벨·힌트 |
--radio-control-offset | var(--checkbox-control-offset) | 원 수직 정렬 |
--radio-group-gap | var(--checkbox-group-gap) | 그룹 간격 |
--radio-button-padding-y · --radio-button-padding-x | var(--checkbox-button-padding-y) · var(--checkbox-button-padding-x) | 버튼형 패딩 |