Skip to Content
ComponentsFoundationFormRadio

Radio

단일 선택을 위한 라디오 버튼 컴포넌트입니다.

개요

Radio는 여러 옵션 중 하나만 선택할 수 있는 컴포넌트입니다. RadioGroup으로 묶어서 사용하며, 카드 스타일도 지원합니다.

주요 특징:

  • 라디오 그룹
  • 카드 스타일 라디오
  • 3가지 Size (sm, md, lg)
  • Disabled 상태

사용 사례:

  • 결제 방법 선택
  • 배송 옵션 선택
  • 성별 선택
  • 단일 옵션 선택

설치

npx @vortex/cli add radio-group --package foundation

기본 사용법

import { RadioGroup, RadioGroupItem } from "@vortex/ui-foundation";
 
export default function Example() {
  return (
    <RadioGroup defaultValue="1">
      <div className="flex items-center space-x-sm">
        <RadioGroupItem value="1" id="r1" />
        <label htmlFor="r1">옵션 1</label>
      </div>
      <div className="flex items-center space-x-sm">
        <RadioGroupItem value="2" id="r2" />
        <label htmlFor="r2">옵션 2</label>
      </div>
    </RadioGroup>
  );
}

Variants (변형)

기본 라디오

<RadioGroup value={value} onValueChange={setValue}>
  <RadioGroupItem value="option1">옵션 1</RadioGroupItem>
  <RadioGroupItem value="option2">옵션 2</RadioGroupItem>
  <RadioGroupItem value="option3">옵션 3</RadioGroupItem>
</RadioGroup>

카드 스타일

<RadioGroup value={value} onValueChange={setValue}>
  <div className="border rounded-lg p-md cursor-pointer hover:bg-gray-50">
    <RadioGroupItem value="card1" />
    <h4>카드 옵션 1</h4>
    <p className="text-sm text-gray-600">설명 텍스트</p>
  </div>
  <div className="border rounded-lg p-md cursor-pointer hover:bg-gray-50">
    <RadioGroupItem value="card2" />
    <h4>카드 옵션 2</h4>
    <p className="text-sm text-gray-600">설명 텍스트</p>
  </div>
</RadioGroup>

Sizes (크기)

<RadioGroupItem size="sm" value="1">Small</RadioGroupItem>
<RadioGroupItem size="md" value="2">Medium</RadioGroupItem>
<RadioGroupItem size="lg" value="3">Large</RadioGroupItem>

Props API

PropTypeDefaultDescription
valuestring-선택된 값
defaultValuestring-기본 선택 값
disabledbooleanfalse비활성화 상태
size’sm’ | ‘md’ | ‘lg''md’크기
onValueChange(value) => void-값 변경 핸들러
classNamestring-추가 CSS 클래스

접근성

Radio 컴포넌트는 WCAG 2.1 AA 기준을 준수합니다.

ARIA 속성:

  • role="radio" (자동 적용)
  • aria-checked (선택 상태)

키보드 네비게이션:

  • ↑ / ↓: 이전/다음 옵션 선택
  • Space: 현재 옵션 선택
  • Tab: 다음 그룹으로 이동

예제

예제 1: 결제 방법 선택

export default function PaymentMethod() {
  const [method, setMethod] = useState("card");
 
  return (
    <RadioGroup value={method} onValueChange={setMethod}>
      <div className="space-y-md">
        <div className="border rounded-lg p-md">
          <RadioGroupItem value="card" id="card" />
          <label htmlFor="card">신용카드</label>
        </div>
        <div className="border rounded-lg p-md">
          <RadioGroupItem value="bank" id="bank" />
          <label htmlFor="bank">계좌이체</label>
        </div>
        <div className="border rounded-lg p-md">
          <RadioGroupItem value="mobile" id="mobile" />
          <label htmlFor="mobile">휴대폰 결제</label>
        </div>
      </div>
    </RadioGroup>
  );
}

관련 컴포넌트

Last updated on
InputSelect