Select

목록에서 고르는 드롭다운 선택 컨트롤.

계약

Overview

Machine-readable contract from Component Spec.

component: selectexport: Selectversion: 1tokens.visual: selectattributes: data-refineui=select-trigger

Anatomy

Part	data-refineui
root	select-trigger
select_item	select-item
select_menu	select-menu

Variants

Axis	Values
appearance	filled, plain

States

Scope	Category	Values
component	pseudo	focus-visible
component	component	data-state: open, closed, pressed, selected
component	environment	forced-colors, dir
select-trigger	component	data-state: open, closed
select-item	component	data-state: pressed, selected

Accessibility

Slot	Element	Role	Required attributes
select-trigger	button	combobox	aria-expanded: required=true, type: boolean
select-menu	div	listbox	—
select-item	div	option	aria-selected: required=true, type: boolean

Keyboard

Key	Action	Native
Escape	close	—
ArrowDown	next-trigger	—
ArrowUp	previous-trigger	—
Home	first-trigger	—
End	last-trigger	—
Enter	activate	true
Space	activate	true

Focus

Section	Property	Value
visual	required	true
visual	selector	:focus-visible

Layout

Property	Value
direction	logical
rtl	true

토큰

Variant

Select a recipe variant — preview and Recipe → Tokens update together.

Recipe → Tokens

Slot bindings for variant="default" — declared in Select/style → tokens.

Slot	Variant	Property	Trace	Semantic	Light → foundation	Dark → foundation	Recipe class
trigger	—	background	select.background	backgroundPrimary	neutralWhite	neutral900	bg-refineui-alias-background-primary
trigger	—	border	select.border.default	borderDefault	neutral300	neutral650	border-refineui-alias-border-default
trigger	—	foreground	select.text	foregroundPrimary	primaryBlack	neutralWhite	text-refineui-alias-foreground-primary
trigger	—	placeholder	select.placeholder	foregroundPlaceholder	neutral450	neutral500	text-refineui-alias-foreground-placeholder

Component token trace

All paths in token-trace-v2.json prefixed with select.

Trace	Semantic	Light foundation	Dark foundation	Light	Dark
select.background	backgroundPrimary	neutralWhite	neutral900	#FFFFFF	#1A1A1A
select.border.default	borderDefault	neutral300	neutral650	#DBDBDB	#5B5B5B
select.border.disabled	borderDisabled	neutral250	neutral700	#E0E0E0	#404040
select.border.error	borderError	red500	red500	#FF6969	#FF6969
select.border.success	borderSuccess	green500	green500	#26B12D	#26B12D
select.disabledBackground	backgroundSurfaceDisabled	neutral150	neutral850	#F0F0F0	#222222
select.placeholder	foregroundPlaceholder	neutral450	neutral500	#BBBBBB	#A4A4A4
select.text	foregroundPrimary	primaryBlack	neutralWhite	#212121	#FFFFFF

설치

npm install @refineui/react @refineui/tokens

사용법

import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@refineui/react";

<Select value={country} onValueChange={setCountry}>
  <SelectTrigger>
    <SelectValue placeholder="Select a country" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="us">United States</SelectItem>
    <SelectItem value="ca">Canada</SelectItem>
    <SelectItem value="uk">United Kingdom</SelectItem>
  </SelectContent>
</Select>

<Select size="lg" fullWidth>
  <SelectTrigger>
    <SelectValue placeholder="Choose an option" />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectLabel>Fruits</SelectLabel>
      <SelectItem value="apple">Apple</SelectItem>
      <SelectItem value="banana">Banana</SelectItem>
    </SelectGroup>
    <SelectSeparator />
    <SelectItem value="other">Other</SelectItem>
  </SelectContent>
</Select>

API 레퍼런스

Select

Prop	Default	Type	Description
value	—	string	제어형 선택 값.
defaultValue	—	string	비제어형 초기 값.
onValueChange	—	(value: string) => void	선택 변경 시 이벤트 핸들러.
open	—	boolean	제어형 열림 상태.
onOpenChange	—	(open: boolean) => void	열림 상태 변경 시 이벤트 핸들러.
placeholder	—	string	플레이스홀더 텍스트.
size	"md"	"sm" \| "md" \| "lg"	컨트롤 높이 티어.
fullWidth	false	boolean	부모 전체 너비로 늘어납니다.
disabled	false	boolean	인터랙션을 비활성화합니다.

SelectTrigger

드롭다운을 여는 버튼.

Prop	Default	Type	Description
appearance	"filled"	"filled" \| "plain"	조합 표면용 필드 크롬 vs flush 트리거(Footer 로케일, Calendar 캡션).

SelectValue

선택된 값 또는 플레이스홀더를 표시합니다.

SelectContent

드롭다운 패널 컨테이너.

Prop	Default	Type	Description
position	"item-aligned"	"item-aligned" \| "popper"	포지셔닝 전략.

SelectItem

Prop	Default	Type	Description
value	—	string	항목 값(필수).
disabled	false	boolean	이 항목을 비활성화합니다.