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.json

Composition

RadioGroup
├── RadioGroupItem
└── RadioGroupItem

Dependencies

설치 시 자동으로 함께 들어오는 의존성. 모든 버전은 정확히 고정되어 자동 업데이트를 방지합니다.

npm packages

PackageVersion
@base-ui/react1.5.0
clsx2.1.1
tailwind-merge3.6.0

Groudit components

이 컴포넌트가 의존하는 다른 Groudit 컴포넌트 — 함께 설치됩니다.

Accessibility

이 컴포넌트는 WAI-ARIA radiogroup 패턴을 따릅니다.

Keyboard interactions

KeyDescription
이전/다음 옵션.
이전/다음 옵션.
Space
현재 옵션 선택.
Tab
그룹 밖으로 이동.

WCAG 2.1 AA

이 컴포넌트는 다음 Success Criteria 충족을 목표로 합니다.