Radio · Overview

Radio는 여러 옵션 중 하나만 선택해야 하는 경우에 사용하는 입력 컴포넌트입니다. 동일 그룹 내 항목은 반드시 하나만 선택됩니다. native <input type="radio">처럼 name · value · defaultChecked · disabled · defaultValue를 사용하고, 외형만 토큰으로 통일합니다. 크기는 medium(기본) · large입니다. 배치는 orientation prop 없이 RadioGroup className으로 직접 지정합니다. Disabled는 Disabled(미선택) · Selected + Disabled(선택 유지)로 구분합니다.

Basic

RadioGroup + RadioItem. defaultValue로 초기 선택을 지정합니다 (native defaultChecked와 동일). 배치는 className="flex flex-col gap-…"처럼 직접 지정합니다.

요금제

FreeProEnterprise

RadioItem — 레이블이 포함된 한 줄 조합입니다. size 기본값은 medium입니다.

Sizes

medium(기본) · large. 뷰포트에 따른 크기 전환은 없습니다.

Medium기본 16px
Large20px

Medium (default)

FreePro

Large

FreePro

With Label

Radio + Label(@/components/label)을 htmlFor로 조합합니다. RadioItem을 쓰지 않고 컨트롤·레이블을 분리할 때 사용합니다.

Light

Dark

System

@/components/label의 Label을 htmlFor로 Radio id와 연결합니다. radio 패키지는 label에 의존하지 않습니다.

import { RadioGroup, Radio } from "@/components/radio";
import { Label } from "@/components/label";

<RadioGroup name="theme" defaultValue="light" className="flex flex-col gap-3">
  <div className="flex items-center gap-2">
    <Radio id="theme-light" value="light" />
    <Label htmlFor="theme-light">Light</Label>
  </div>
</RadioGroup>

Disabled

disabled만이면 Disabled(미선택)가 기본입니다. defaultValue로 선택한 뒤 disabled하면 Selected + Disabled입니다. Item disabled는 그룹 일부만 비활성할 때 씁니다.

DisableddefaultValue 없이 disabled — 미선택 + 비활성
Selected + DisableddefaultValue + disabled — 선택 유지 + 조작 불가
Item disabled그룹 중 일부만 disabled (미선택)

Required

클라비의 기본 에러 정책에서 필드 검증은 FieldError(+ data-invalid)를 권장합니다. 단, 소비앱은 각 프로젝트의 정책을 따릅니다.

States

인터랙션 상태입니다. Overview에서 강제 표시합니다. Disabled · Selected + Disabled는 Checkbox와 동일 네이밍입니다.

Default기본(미선택) 상태입니다.
Hover포인터가 올라간 상태입니다.
Focus키보드·클릭으로 포커스된 상태입니다.
Selected선택된 상태입니다.
Disabled미선택 + 비활성
Selected + Disabled선택 유지 + 조작 불가