Radio Group · 컴포넌트 · 디자인 시스템

1. 목적과 출처

단일 선택

출처: shadcn 기본 제공 (Base UI 기반 base-nova 스타일)
프로젝트: src/components/ui/radio-group.tsx
Registry: @adcapsule/radio-group

2. 프리뷰와 변형

오른쪽 위에서 색 모드를 바꾸면 라이트·다크를 비교할 수 있습니다.

Radio Group 상태
상태	모양
고른 항목
비활성 disabled
오류 aria-invalid

3. 속성 바꿔 보기

높음

보통

낮음

고른 값: normal

가로 배치'낮음' 비활성

<RadioGroup value={value} onValueChange={setValue}>
  <Field orientation="horizontal">
    <RadioGroupItem value="high" id="p-high" />
    <FieldLabel htmlFor="p-high">높음</FieldLabel>
  </Field>
  <Field orientation="horizontal">
    <RadioGroupItem value="normal" id="p-normal" />
    <FieldLabel htmlFor="p-normal">보통</FieldLabel>
  </Field>
  <Field orientation="horizontal">
    <RadioGroupItem value="low" id="p-low" />
    <FieldLabel htmlFor="p-low">낮음</FieldLabel>
  </Field>
</RadioGroup>

4. 설치와 사용

npx shadcn@4.23.0 add @adcapsule/radio-group

npm 패키지: @base-ui/react
함께 설치: @adcapsule/utils

처음 쓰는 프로젝트는 @adcapsule/theme를 먼저 설치합니다. Registry 연결

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

<RadioGroup defaultValue="normal" aria-label="우선순위">
  <RadioGroupItem value="high" id="p-high" />
  <Label htmlFor="p-high">높음</Label>
</RadioGroup>

5. 바꿔도 되는 것과 유지할 토큰

제품에서 바꿔도 되는 것

value·onValueChange로 제어
항목별 disabled
배치는 className(flex 등)으로
묶음에 aria-label 또는 FieldLegend

공통으로 유지할 토큰

accent.solid (고른 점)
border.strong (테두리)
status.danger (오류)

1. 목적과 출처

단일 선택

출처: shadcn 기본 제공 (Base UI 기반 base-nova 스타일)
프로젝트: src/components/ui/radio-group.tsx
Registry: @adcapsule/radio-group

2. 프리뷰와 변형

오른쪽 위에서 색 모드를 바꾸면 라이트·다크를 비교할 수 있습니다.

Radio Group 상태
상태	모양
고른 항목
비활성 disabled
오류 aria-invalid

3. 속성 바꿔 보기

높음

보통

낮음

고른 값: normal

가로 배치'낮음' 비활성

<RadioGroup value={value} onValueChange={setValue}>
  <Field orientation="horizontal">
    <RadioGroupItem value="high" id="p-high" />
    <FieldLabel htmlFor="p-high">높음</FieldLabel>
  </Field>
  <Field orientation="horizontal">
    <RadioGroupItem value="normal" id="p-normal" />
    <FieldLabel htmlFor="p-normal">보통</FieldLabel>
  </Field>
  <Field orientation="horizontal">
    <RadioGroupItem value="low" id="p-low" />
    <FieldLabel htmlFor="p-low">낮음</FieldLabel>
  </Field>
</RadioGroup>

4. 설치와 사용

npx shadcn@4.23.0 add @adcapsule/radio-group

npm 패키지: @base-ui/react
함께 설치: @adcapsule/utils

처음 쓰는 프로젝트는 @adcapsule/theme를 먼저 설치합니다. Registry 연결

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

<RadioGroup defaultValue="normal" aria-label="우선순위">
  <RadioGroupItem value="high" id="p-high" />
  <Label htmlFor="p-high">높음</Label>
</RadioGroup>

1. 목적과 출처

2. 프리뷰와 변형

3. 속성 바꿔 보기

4. 설치와 사용

5. 바꿔도 되는 것과 유지할 토큰

제품에서 바꿔도 되는 것

공통으로 유지할 토큰

6. 관련 패턴·템플릿

1. 목적과 출처

2. 프리뷰와 변형

3. 속성 바꿔 보기

4. 설치와 사용

5. 바꿔도 되는 것과 유지할 토큰

제품에서 바꿔도 되는 것

공통으로 유지할 토큰

6. 관련 패턴·템플릿