Radio
라디오 그룹이 선택 상태를 소유하는 하나의 선택 항목이에요.
핵심 속성
| 판단 기준 | 선택 방법 |
|---|---|
| 합성 | 모든 TRRadio.Root를 TRRadioGroup 안에 배치해요. |
| 선택 | 각 루트에 고유한 value를 주고 그룹이 선택한 값을 소유해요. |
| 크기 | md, lg 중에서 고르며 기본값은 md예요. |
| 항목 사용 가능 여부 | 한 항목만 그룹과 달라야 할 때 루트의 readOnly나 disabled를 써요. |
보이는 항목 레이블은 각 루트를 TRField.Item 안에 TRField.Label과 함께 두어 만들어요. 아이템이 그 안의 라디오에 레이블을 연결하니 id나 htmlFor가 필요 없어요. TRField.Item에는 TRField.Root 조상이 반드시 필요하니, 아이템이나 그룹 전체를 하나의 TRField.Root로 감싸세요.
라디오는 단독 불리언 컨트롤이 아니에요. 하나의 독립 값을 켜고 끌 수 있다면 TRCheckbox나 TRSwitch를 써요.
설치
pnpm add @tinyrack/ui긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
스타일
@import '@tinyrack/ui/components/radio.css';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
가져오기
import { TRRadio } from '@tinyrack/ui/components/radio';
import { TRRadioGroup } from '@tinyrack/ui/components/radio-group';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
플레이그라운드
사용법
예시
선택 상태를 보여줘요
선택 전과 선택 후 고유 링크
선택 상태는 그룹이 소유한 값과 비교할 때만 의미가 있어요.
컨트롤 밀도에 맞춰요
한 항목의 사용 가능 여부를 바꿔요
편집 가능, 읽기 전용, 사용 불가 고유 링크
모든 항목이 같은 상태라면 그룹 prop을 우선해요.
API
Root 속성
| Prop | 타입 / 기본값 | 용도 |
|---|---|---|
value | unknown | 그룹 안에서 이 항목을 구분해요. |
uiSize | 'md' | 'lg', 'md' | 보이는 글리프 크기를 정해요. |
disabled, readOnly | boolean, 상속하거나 false | 한 항목의 사용 가능 여부를 덮어써요. |
inputRef, ref | 입력 ref, 루트 ref | 숨겨진 입력이나 보이는 루트에 접근해요. |
선택 변경은 루트가 아니라 TRRadioGroup.onValueChange로 알려줘요. Root는 네이티브 prop과 이벤트를 전달하고 Base UI의 render, 상태 기반 className과 style을 지원해요.
Indicator와 접근성
TRRadio.Indicator는 선택했을 때 마운트하고, keepMounted를 설정하면 계속 유지해요. 그룹과 모든 항목에 접근 가능한 이름을 제공해요. 방향키 탐색, 폼 소유권, 필수 검사, 초기화는 TRRadioGroup이 담당해요.
모듈은 TRRadio, 두 이름 있는 파트, 각 prop 및 상태 타입, TRRadioUiSize를 내보내요. CSS는 직접 가져와야 해요.