Select

Floating UI 기반의 헤드리스 셀렉트/드롭다운 컴포넌트. 제어 값, 포탈 렌더링, CSS 전환을 지원합니다.

데모

과일을 선택하세요

Show Code

API 레퍼런스

Select

Prop	Type	Default	Description
value	string	-	현재 선택된 값
onChange	(value: string) => void	-	옵션 선택 시 콜백
transition	boolean | UseTransitionStylesProps	false	열기/닫기 CSS 전환 활성화
children	ReactNode	-	Select 하위 컴포넌트 (Trigger, Options)

Select.Trigger

Prop	Type	Default	Description
children	ReactElement	-	옵션 목록을 토글하는 클릭 가능한 요소

Select.Options

Prop	Type	Default	Description
children	ReactNode | ((props: { floating, interactions }) => ReactNode)	-	Option 요소들 또는 floating 컨텍스트를 받는 렌더 함수
portal	boolean | FloatingPortalProps	false	포탈에서 옵션 렌더링 (Select.Options에 전달)
...props	ComponentPropsWithoutRef<"div">	-	모든 네이티브 div 요소 속성. role="listbox"로 렌더링

Select.Option

Prop	Type	Default	Description
value	string	-	이 옵션의 값
...props	ComponentPropsWithoutRef<"div">	-	모든 네이티브 div 요소 속성. role="option" 및 aria-selected로 렌더링