Radio Group

화면에 보이는 소수의 선택지 중 하나만 고르게 할 때 사용합니다.

미리보기

화면 밀도 선택

보조 설명이 있는 좁게·기본·넓게 세 가지 화면 밀도 중 하나를 선택합니다.

좁게한 화면에 더 많은 정보를 표시합니다.기본기본 간격과 부드러운 깊이를 사용합니다.넓게터치 환경에 넉넉한 간격을 제공합니다.

설치

Registry를 처음 사용한다면 기본 설정과 공통 스타일 설치 을 먼저 완료하세요.

npx shadcn@latest add @neumorphism-ui/radio-group

공통 base를 한 번 설치한 뒤 CLI로 필요한 컴포넌트와 의존성을 추가합니다.

화면 밀도 선택

npx shadcn@latest add @neumorphism-ui/label @neumorphism-ui/radio-group

Registry JSON

사용법

그룹 이름을 제공하고 각 RadioGroupItem에 고유 value와 보이는 레이블을 지정하세요. defaultValue로 초기값을 정하거나 onValueChange와 함께 선택 값을 제어합니다.

"use client";

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

export default function Example() {
  const id = useId();
  return (
    <RadioGroup defaultValue="standard" aria-label="Delivery method">
      <Label htmlFor={id + "-standard"} className="flex items-center gap-2">
        <RadioGroupItem id={id + "-standard"} value="standard" />Standard
      </Label>
      <Label htmlFor={id + "-express"} className="flex items-center gap-2">
        <RadioGroupItem id={id + "-express"} value="express" />Express
      </Label>
    </RadioGroup>
  );
}

API 레퍼런스

React context로 name과 선택 상태를 공유하면서 각 항목은 실제 input[type=radio]로 렌더링합니다. controlled와 uncontrolled 값, 가로·세로 배치, disabled와 required를 지원합니다.

컴포넌트	속성	타입	기본값	설명
`RadioGroup`	`value / defaultValue`	`string`	`—`	controlled 또는 초기 uncontrolled 선택 값입니다.
`RadioGroup`	`onValueChange`	`(value: string) => void`	`—`	선택 값이 바뀔 때 호출됩니다.
`RadioGroup`	`orientation`	`"horizontal" \| "vertical"`	`"vertical"`	배치 방향과 aria-orientation을 설정합니다.
`RadioGroup`	`name`	`string`	`generated id`	항목이 공유하는 native radio name입니다.
`RadioGroup`	`disabled / required`	`boolean`	`false`	모든 항목의 입력 제약을 설정합니다.
`RadioGroupItem`	`value`필수	`string`	`—`	항목이 선택됐을 때 그룹에 전달할 값입니다.

미리보기

화면 밀도 선택

설치

사용법

API 레퍼런스

접근성