Components/RadioGroup

RadioGroup

여러 옵션 중 하나를 선택하는 라디오 버튼 그룹입니다. Radix UI RadioGroup 기반.

Installation

bash
npx axis-cli add radio-group

Usage

tsx
import { Label, RadioGroup, RadioGroupItem } from '@axis-ds/ui-react'

export function Example() {
  return (
    <RadioGroup defaultValue="comfortable">
      <div className="flex items-center space-x-2">
        <RadioGroupItem value="default" id="r1" />
        <Label htmlFor="r1">Default</Label>
      </div>
      <div className="flex items-center space-x-2">
        <RadioGroupItem value="comfortable" id="r2" />
        <Label htmlFor="r2">Comfortable</Label>
      </div>
      <div className="flex items-center space-x-2">
        <RadioGroupItem value="compact" id="r3" />
        <Label htmlFor="r3">Compact</Label>
      </div>
    </RadioGroup>
  )
}

Components

RadioGroup

라디오 그룹 루트 컨테이너

RadioGroupItem

개별 라디오 버튼

Props

value
Type:string
Default:-

선택된 값 (controlled)

defaultValue
Type:string
Default:-

기본 선택 값

onValueChange
Type:(value: string) => void
Default:-

값 변경 콜백

disabled
Type:boolean
Default:false

비활성화 여부

orientation
Type:"horizontal" | "vertical"
Default:"vertical"

배치 방향

name
Type:string
Default:-

폼 필드 이름

required
Type:boolean
Default:false

필수 입력 여부