Radio Group
Betav1.0.0여러 옵션 중 하나만 선택하는 라디오 버튼 그룹. 키보드 ↑↓ 이동 + Space 선택.
Loading…
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
import { Label } from "@/components/ui/label";
<RadioGroup defaultValue="comfortable">
<div className="flex items-center gap-2">
<RadioGroupItem value="default" id="r1" />
<Label htmlFor="r1">Default</Label>
</div>
<div className="flex items-center gap-2">
<RadioGroupItem value="comfortable" id="r2" />
<Label htmlFor="r2">Comfortable</Label>
</div>
</RadioGroup>Installation
pnpm dlx shadcn@latest add https://groudit.com/r/radio-group.jsonComposition
RadioGroup
├── RadioGroupItem
└── RadioGroupItemDependencies
설치 시 자동으로 함께 들어오는 의존성. 모든 버전은 정확히 고정되어 자동 업데이트를 방지합니다.
npm packages
| Package | Version |
|---|---|
| @base-ui/react | 1.5.0 |
| clsx | 2.1.1 |
| tailwind-merge | 3.6.0 |
Accessibility
이 컴포넌트는 WAI-ARIA radiogroup 패턴을 따릅니다.
Keyboard interactions
| Key | Description |
|---|---|
↑↓ | 이전/다음 옵션. |
←→ | 이전/다음 옵션. |
Space | 현재 옵션 선택. |
Tab | 그룹 밖으로 이동. |