Select
알려진 컬렉션에서 값을 선택하고 버튼으로 열 수 있는 키보드 탐색 popup을 제공해요.
핵심 속성
| 속성 | 동작 |
|---|---|
| value | defaultValue로 비제어하거나 value와 onValueChange로 제어해요. |
| open | defaultOpen으로 비제어하거나 open과 onOpenChange로 제어해요. |
| disclosure | Trigger가 focus를 소유하고 Portal, Positioner, Popup이 floating layer를 구성해요. |
| popup 구조 | popup은 trigger보다 좁아지지 않고 기본적으로 256px까지 넓어지며, 320px과 사용 가능한 viewport 너비를 넘지 않아요. option 여백까지 강조 배경이 채워져요. |
| collection | group, label, separator, disabled item, text, indicator가 menu anatomy를 설명해요. |
| form | name, form, required, inputRef가 native 제출, validation, reset과 통합돼요. |
trigger가 밀도 높은 컨트롤 표면에 속하면 TRSelect.Trigger uiSize="md"을 사용하세요.
설치
pnpm add @tinyrack/ui긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
스타일
@import '@tinyrack/ui/components/select.css';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
가져오기
import { TRSelect } from '@tinyrack/ui/components/select';
import { TRForm } from '@tinyrack/ui/components/form';
import { TRField } from '@tinyrack/ui/components/field';
import { TRButton } from '@tinyrack/ui/components/button';
import { ChevronDown } from 'lucide-react';긴 줄은 코드 영역 안에서 가로로 스크롤해 확인하세요.
플레이그라운드
사용법
예시
트리거 크기 고유 링크
팝업 목록과 별개로 트리거 밀도를 선택하세요.
길게 스크롤되는 collection 고유 링크
팝업을 열어 제한된 높이, 스크롤 화살표, 긴 레이블과 강조된 포커스 처리를 확인하세요.
API
전체 anatomy는 Root, Label, Trigger, Value, Icon, Portal, Backdrop, Positioner, Popup, List, Item, ItemIndicator, ItemText, Arrow, ScrollDownArrow, ScrollUpArrow, Group, GroupLabel, Separator예요. 모든 part는 TRSelect.Part와 named TRSelectPart export로 제공되며 대응하는 TRSelectPartProps, TRSelectPartState type을 export해요.
| 목적 | 공개 prop과 기본값 |
|---|---|
| 값 | defaultValue 또는 제어형 value를 사용해요. multiple 기본값은 false이고 items는 값을 표시 label에 연결해요. |
| 열림 | defaultOpen 기본값은 false예요. 제어형 open도 사용할 수 있고 modal과 highlightItemOnHover 기본값은 true예요. |
| 사용 가능 상태 | disabled, readOnly, required 기본값은 모두 false예요. |
| 트리거 | `uiSize="md" |
| 배치 | Positioner는 트리거 아래 4px에서 열리고 배치 prop을 받지 않아요. 공간이 부족하면 트리거 위로 전환해요. |
| form | name, form, autoComplete, inputRef를 받아요. 비제어 select는 native reset에서 defaultValue로 돌아가요. |
Trigger에 접근 가능한 이름을 제공하세요. Arrow Down으로 열고 사용 가능한 option 사이를 이동하거나 typeahead를 사용할 수 있어요. Enter로 확정하고 Escape로 닫으면 trigger로 focus가 돌아가요. 포인터 hover, open, highlighted, selected 상태는 배경색으로만 강조하고, 포커스 테두리는 키보드에서 시작된 focus에만 표시해요. 필요하면 value와 open을 독립적으로 제어하세요. 사용할 수 없는 control에는 disabled, 변경할 수 없는 focusable value에는 readOnly를 사용하세요.