Select

드롭다운 형태의 단일 선택 필드예요.

사용법

기본

options로 선택지를 전달해요. placeholder로 기본 안내 문구를 넣을 수 있어요.

문서 상태

스타일 커스터마이징

Select 사용 시 className, style, `classNames`로 모든 스타일을 변경할 수 있어요. CSS 변수는 컴포넌트 루트에 지정하면 variant 기본값을 덮어써요.

className / style

<Select
  className="shadow-md"
  style={{
    --gtd-select-bg: "#059669",
  }}
/>

classNames 슬롯

복합 컴포넌트는 영역별로 클래스를 지정할 수 있어요.

<Select
  classNames={{
    root: "my-select-root",
    field: "my-select-field",
    select: "my-select-select",
    content: "my-select-content",
    item: "my-select-item",
    icon: "my-select-icon"
  }}
/>

CSS 변수

변수	설명
--gtd-select-bg	트리거 배경
--gtd-select-border-color	트리거 테두리색
--gtd-select-radius	트리거 모서리 반경
--gtd-dropdown-bg	펼침 패널 배경 (Dropdown과 동일)
--gtd-dropdown-border-color	펼침 패널 테두리색
--gtd-dropdown-item-hover-bg	항목 호버·포커스 배경

인터페이스

SelectProps

속성	타입	기본값	설명
label	string	—	접근성 레이블
options	SelectOption[]	—	선택지 목록
placeholder	string	—	기본 안내 문구
size	"sm" \| "md" \| "lg"	md	높이
classNames	Record<string, string>	—	슬롯별 클래스 (root, label, input 등)
className	string	—	루트 요소 클래스. Tailwind·커스텀 CSS 적용
style	CSSProperties	—	인라인 스타일·CSS 변수(--gtd-*) 오버라이드

가져오기

import { Select } from "@/components/ui/Select";