컴포넌트
RadioPill
선택 시 그라데이션 인디케이터가 부드럽게 슬라이드하는 세그먼트 알약 라디오 그룹으로, 가로/세로 방향과 상태 점을 지원한다.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/RadioPill-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| options | RadioPillOption[] | [자동, 라이트, 다크] | 표시할 라디오 옵션 목록 (value/label 쌍). |
| defaultValue | string | 첫 옵션 값 | 비제어 모드의 초기 선택 값. |
| orientation | "horizontal" | "vertical" | "horizontal" | 옵션 배치 방향. |
| variant | "solid" | "outline" | "solid" | 인디케이터 스타일: 그라데이션 채움 또는 외곽선. |
| showDot | boolean | true | 각 옵션 앞의 상태 점 표시 여부. |
| onChange | (value: string) => void | undefined | 선택 값이 바뀔 때 호출되는 콜백. |