Native Select
Tinyrack 필드 외관을 사용하면서 브라우저나 플랫폼의 옵션 UI를 여는 실제 HTML select예요.
핵심 속성
| 속성 | 동작 |
|---|---|
| 요소 | 실제 HTML <select>를 렌더링하고 <option>과 <optgroup> 자식을 받아요. |
| 값 | 네이티브 value, defaultValue, onChange 동작을 사용해요. |
| 표시 | 닫힌 상태에는 Tinyrack 스타일을 적용하고 옵션 목록은 브라우저나 플랫폼이 표시해요. |
| 폼 | name, form, required, FormData, 유효성 검사, 초기화 동작을 유지해요. |
| 리스트박스 | multiple 또는 size > 1이면 브라우저의 인라인 리스트박스를 유지하고 장식용 chevron을 제거해요. |
네이티브 폼 동작과 모바일에서 익숙한 플랫폼 선택 UI가 커스텀 팝업보다 중요할 때 TRNativeSelect를 선택하세요. Tinyrack이 렌더링하는 그룹, 선택 표시, 스크롤 컨트롤, 위치 제어, 팝업 상태가 필요하면 TRSelect를 사용하세요.
설치
pnpm add @tinyrack/ui긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
스타일
@import '@tinyrack/ui/components/native-select.css';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
가져오기
import { TRNativeSelect } from '@tinyrack/ui/components/native-select';
import { TRField } from '@tinyrack/ui/components/field';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
플레이그라운드
사용법
예시
네이티브 리스트박스 모드 고유 링크
size로 여러 행을 노출하거나 multiple로 둘 이상의 값을 선택하세요.
API
TRNativeSelect는 네이티브 select 속성, ref, 이벤트, 클래스, 스타일을 렌더링한 <select>에 전달해요. HTML select는 읽기 전용 상태를 지원하지 않으므로 readOnly prop을 별도로 추가하지 않아요.
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
uiSize | "sm" | "md" | "lg" | "md" | 닫힌 컨트롤의 크기를 정해요. |
appearance | "solid" | "ghost" | "solid" | 기본 필드 외관을 선택해요. |
multiple | boolean | false | 네이티브 다중 선택 리스트박스를 사용해요. |
size | number | 브라우저 기본값 | 네이티브 행을 노출하며, 1보다 크면 리스트박스로 표시해요. |
TRField.Label, 네이티브 <label>, aria-label 중 하나로 접근 가능한 이름을 제공하세요. onChange={(event) => ...}에서 event.currentTarget.value를 읽고, 다중 선택에서는 selectedOptions를 읽으세요. 열린 옵션 UI는 브라우저와 운영체제가 관리하므로 옵션 스타일은 Tinyrack 컴포넌트 규약에 포함되지 않아요.