EN
5

Radio Group

라디오 버튼이라 불리는 체크 가능한 버튼 세트로, 원하는 만큼 선택할 수 있습니다.

혈액형
import { RadioGroup, RadioGroupItem } from "@chadcn/ui"
import { Label } from "@/components/ui/label"

export function RadioGroupDemo() {
  return (
    <fieldset className="space-y-3">
      <legend className="text-sm font-medium">혈액형</legend>
      <RadioGroup defaultValue="a">
        <div className="flex items-center gap-2">
          <RadioGroupItem value="a" id="r1" />
          <Label htmlFor="r1">A형</Label>
        </div>
        <div className="flex items-center gap-2">
          <RadioGroupItem value="b" id="r2" />
          <Label htmlFor="r2">B형</Label>
        </div>
        <div className="flex items-center gap-2">
          <RadioGroupItem value="ab" id="r3" />
          <Label htmlFor="r3">AB형</Label>
        </div>
        <div className="flex items-center gap-2">
          <RadioGroupItem value="o" id="r4" />
          <Label htmlFor="r4">O형</Label>
        </div>
      </RadioGroup>
    </fieldset>
  )
}

동작 방식

일반 라디오 그룹처럼 보이지만, 여러 옵션을 선택할 수 있습니다. 이미 선택된 옵션을 클릭하면 선택이 해제됩니다. 라디오 버튼이 왜 선택을 제한해야 하나요?

설치

준비 중패키지가 아직 npm에 게시되지 않았습니다.
pnpm add @chadcn/ui

사용법

import "@chadcn/ui/styles.css"
import { RadioGroup, RadioGroupItem } from "@chadcn/ui"
import { Label } from "@/components/ui/label"
<RadioGroup defaultValue="option-one">
  <div className="flex items-center gap-2">
    <RadioGroupItem value="option-one" id="option-one" />
    <Label htmlFor="option-one">옵션 1</Label>
  </div>
  <div className="flex items-center gap-2">
    <RadioGroupItem value="option-two" id="option-two" />
    <Label htmlFor="option-two">옵션 2</Label>
  </div>
</RadioGroup>
준비 중패키지가 아직 npm에 게시되지 않았습니다.

예제

비활성화

disabled prop으로 전체 라디오 그룹을 비활성화합니다.

import { RadioGroup, RadioGroupItem } from "@chadcn/ui"
import { Label } from "@/components/ui/label"

export function RadioGroupDisabled() {
  return (
    <RadioGroup defaultValue="comfortable" disabled>
      <div className="flex items-center gap-2">
        <RadioGroupItem value="default" id="rd1" />
        <Label htmlFor="rd1">기본</Label>
      </div>
      <div className="flex items-center gap-2">
        <RadioGroupItem value="comfortable" id="rd2" />
        <Label htmlFor="rd2">편안한</Label>
      </div>
      <div className="flex items-center gap-2">
        <RadioGroupItem value="compact" id="rd3" />
        <Label htmlFor="rd3">컴팩트</Label>
      </div>
    </RadioGroup>
  )
}

API 레퍼런스

자세한 내용은 Radix UI Radio Group 문서를 참고하세요.