Installation
bash
npx axis-cli add radio-groupUsage
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
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | - | 선택된 값 (controlled) |
defaultValue | string | - | 기본 선택 값 |
onValueChange | (value: string) => void | - | 값 변경 콜백 |
disabled | boolean | false | 비활성화 여부 |
orientation | "horizontal" | "vertical" | "vertical" | 배치 방향 |
name | string | - | 폼 필드 이름 |
required | boolean | false | 필수 입력 여부 |
valueType:
stringDefault:
-선택된 값 (controlled)
defaultValueType:
stringDefault:
-기본 선택 값
onValueChangeType:
(value: string) => voidDefault:
-값 변경 콜백
disabledType:
booleanDefault:
false비활성화 여부
orientationType:
"horizontal" | "vertical"Default:
"vertical"배치 방향
nameType:
stringDefault:
-폼 필드 이름
requiredType:
booleanDefault:
false필수 입력 여부