Skip to content
Docs
컴포넌트로 돌아가기

Radio

@hua-labs/ui
v1.1.0

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

설치

bash
npm install @hua-labs/hua
Import
tsx
import { Radio } from "@hua-labs/hua";

@hua-labs/ui의 UI 컴포넌트를 @hua-labs/hua에서 통합 제공합니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

라이브 데모

라디오 그룹

선택됨:
free

개인 사용을 위한 기본 기능

전문가를 위한 고급 기능

대규모 팀을 위한 전체 기능

가로 배치

변형

default
outline
filled
glass

크기

sm
md
lg

상태

Props

이름타입기본값설명
variant"default" | "outline" | "filled" | "glass""default"시각적 스타일 변형
size"sm" | "md" | "lg""md"라디오 크기
name*string-라디오 그룹 이름
value*string-라디오 값
labelstring-라디오 레이블 텍스트
descriptionstring-도움말 설명 텍스트
errorbooleanfalseError state indicator
successbooleanfalseSuccess state indicator
disabledbooleanfalse라디오 비활성화

코드 예시

기본 사용법
import { Radio } from '@hua-labs/ui/form';

<Radio name="option" value="1" label="Option 1" />
<Radio name="option" value="2" label="Option 2" />
<Radio name="option" value="3" label="Option 3" />
설명 포함
<Radio
  name="plan"
  value="free"
  label="Free"
  description="Basic features for personal use"
/>
<Radio
  name="plan"
  value="pro"
  label="Pro"
  description="Advanced features for professionals"
/>
제어 모드
const [selected, setSelected] = useState("free");

<Radio
  name="plan"
  value="free"
  label="Free"
  checked={selected === "free"}
  onChange={() => setSelected("free")}
/>
<Radio
  name="plan"
  value="pro"
  label="Pro"
  checked={selected === "pro"}
  onChange={() => setSelected("pro")}
/>

접근성

  • •라디오 역할: 스크린 리더를 위한 role='radio'
  • •그룹 탐색: 그룹 내 화살표 키 탐색
  • •aria-checked: 스크린 리더에 선택 상태를 전달
  • •이름 그룹화: 같은 name 속성으로 그룹화