라디오 그룹

라디오 그룹 (Radio Group)

체크 가능한 버튼의 집합, 즉 라디오 버튼 그룹이에요. 여러 옵션 중에서 동시에 하나만 선택할 수 있게 해 주는 컴포넌트예요. 하나를 고르면 이전에 고른 선택이 자동으로 해제되죠. 서로 배타적인 선택지를 보여줄 때 사용해요.

출처: 문서

본문

설치하기

npx shadcn@latest add radio-group

npm install @radix-ui/react-radio-group

사용하기

Label과 라디오 그룹 컴포넌트를 import 하고,

import { Label } from "@/components/ui/label"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"

다음 구조로 조립하면 돼요. RadioGroup 안에 RadioGroupItem을 하나씩 넣고, 각 항목에 value와 id를 지정해요. Label의 htmlFor를 같은 id로 맞춰 주면 라벨을 눌러도 선택돼요.

<RadioGroup defaultValue="option-one">
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="option-one" id="option-one" />
    <Label htmlFor="option-one">Option One</Label>
  </div>
  <div className="flex items-center space-x-2">
    <RadioGroupItem value="option-two" id="option-two" />
    <Label htmlFor="option-two">Option Two</Label>
  </div>
</RadioGroup>

예시

폼