Radio
여러 옵션 중 하나를 선택할 수 있는 라디오 버튼 컴포넌트입니다.
import { Radio } from 'sud-ui';사용할 때
여러 옵션 중 하나를 선택할 때
사용자의 선택이나 결정을 확인할 때
사용예제
Basic Usage
기본적인 사용 방법입니다.
Default Checked Radio
기본 선택된 라디오 버튼입니다.
disable option Radio
비활성화된 옵션을 포함한 라디오 그룹입니다.
Disabled Radio
비활성화된 라디오 버튼입니다.
Radio Group
라디오 그룹입니다.
Color Type Radio
라디오 버튼의 색상 타입입니다.
사용 방법
컴포넌트의 props를 설정하는 방법입니다.
| checked | 라디오 버튼의 선택 상태 (제어 컴포넌트) | boolean | - |
| defaultChecked | 라디오 버튼의 초기 선택 상태 (비제어 컴포넌트) | boolean | false |
| onChange | 선택 상태가 변경될 때 호출되는 함수 | (checked: boolean) => void | - |
| labelPosition | 라벨의 위치 | left | right | top | bottom | right |
| children | 라디오 버튼의 라벨 | ReactNode | - |
| color | 라디오 버튼의 텍스트 색상(palette값 또는 HEX code) | string | - |
| disabled | 비활성화 여부 | boolean | false |
| colorType | 라디오 버튼의 색상 타입 | default | primary | success | warning | danger | info | red | rose | coral | orange | volcano | apricot | yellow | gold | amber | green | lime | mint | blue | sky | cerulean | indigo | cobalt | navy | purple | plum | orchid | forest | sage | warm-gray | cool-gray | neutral | text | ghost | primary |
| className | 추가 클래스명 | string | - |
| style | 추가 스타일 | CSSProperties | {} |
| ariaLabel | ARIA 라벨 | string | - |
| ariaRequired | ARIA required 속성 | boolean | - |
| name | 라디오 버튼의 이름 | string | - |
| value | 폼 제출에 사용할 값 | string | number | - |
| required | 필수 입력 여부 | boolean | false |
Radio.Group
| options | 라디오 버튼 옵션 배열 | Array<{ label: ReactNode, value: string | number, disabled?: boolean }> | [] |
| value | 현재 선택된 값 | string | number | null | - |
| onChange | 값이 변경될 때 호출되는 함수 | (value: string | number) => void | - |
| layout | 레이아웃 타입 | flex | grid | flex |
| direction | 배치 방향 | horizontal | vertical | vertical |
| cols | 그리드 레이아웃의 열 수 | number | 1 |
| gap | 라디오 버튼 간격 | number | 8 |
| disabled | 전체 그룹 비활성화 | boolean | false |
| itemDisabled | 비활성화할 옵션 값 배열 | (string | number)[] | [] |
| color | 라디오 버튼 텍스트 색상(palette값 또는 HEX code) | string | - |
| colorType | 라디오 버튼 색상 타입 | default | primary | success | warning | danger | info | red | rose | coral | orange | volcano | apricot | yellow | gold | amber | green | lime | mint | blue | sky | cerulean | indigo | cobalt | navy | purple | plum | orchid | forest | sage | warm-gray | cool-gray | neutral | text | ghost | primary |
| labelPosition | 라벨 위치 | left | right | top | bottom | right |
| ariaLabel | ARIA 라벨 | string | - |
| ariaRequired | ARIA required 속성 | boolean | - |
| name | 라디오 그룹 이름 | string | - |
| className | 추가 클래스명 | string | - |
| style | 추가 스타일 | CSSProperties | {} |