폼과 선택@neumorphism-ui/radio-group

Radio Group

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

@neumorphism-ui/radio-group

Registry JSON

미리보기

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

설치

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

CLI가 npm 의존성, base 토큰, utils와 컴포넌트 소스를 순서대로 확인하고 설치합니다.

Registry를 처음 사용한다면 namespace 설정 을 먼저 완료하세요.

사용법

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

Import

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

Example

<RadioGroup
  defaultValue="comfortable"
  orientation="horizontal"
  aria-label="화면 밀도"
>
  <Label className="flex gap-2" htmlFor="density-compact">
    <RadioGroupItem id="density-compact" value="compact" />
    Compact
  </Label>
  <Label className="flex gap-2" htmlFor="density-comfortable">
    <RadioGroupItem id="density-comfortable" value="comfortable" />
    Comfortable
  </Label>
</RadioGroup>

API 레퍼런스

컴포넌트	속성	타입	기본값	설명
`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`	`—`	항목이 선택됐을 때 그룹에 전달할 값입니다.

미리보기

설치

사용법

Import

Example

API 레퍼런스

접근성