Select

설치 확인

목록에서 하나 고르기

1. 목적과 출처

목록에서 하나 고르기

출처: shadcn 기본 제공 (Base UI 기반 base-nova 스타일)
프로젝트: src/components/ui/select.tsx
Registry: @adcapsule/select

2. 프리뷰와 변형

오른쪽 위에서 색 모드를 바꾸면 라이트·다크를 비교할 수 있습니다.

Select 상태
상태	모양
고르기 전
고른 뒤
작게 size="sm"
비활성 disabled

3. 속성 바꿔 보기

size

disabled그룹으로 나눔

const items = [
  { value: null, label: "담당자 선택" },
  { value: "minseo", label: "김민서" },
  …
]

<Select items={items}>
  <SelectTrigger aria-label="담당자">
    <SelectValue />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="minseo">김민서</SelectItem>
    …
  </SelectContent>
</Select>

4. 설치와 사용

npx shadcn@4.23.0 add @adcapsule/select

npm 패키지: @base-ui/react, lucide-react
함께 설치: @adcapsule/utils

처음 쓰는 프로젝트는 @adcapsule/theme를 먼저 설치합니다. Registry 연결

import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

const items = [{ value: null, label: "담당자 선택" }, { value: "minseo", label: "김민서" }]

<Select items={items}>
  <SelectTrigger aria-label="담당자"><SelectValue /></SelectTrigger>
  <SelectContent>
    <SelectItem value="minseo">김민서</SelectItem>
  </SelectContent>
</Select>

5. 바꿔도 되는 것과 유지할 토큰

제품에서 바꿔도 되는 것

SelectTrigger size: sm·default
items에 value: null 항목을 두면 고르기 전 문구
SelectGroup·SelectLabel·SelectSeparator로 묶음
disabled

공통으로 유지할 토큰

border.strong (테두리)
surface.raised (펼친 목록, --popover)
surface.hover (가리킨 항목, --accent)
control.height.sm·md
radius.md (트리거·펼친 목록 6px, 입력에 맞춤)
radius.sm (목록 항목 4px)

상태

모양

고르기 전

고른 뒤

작게 size="sm"

비활성 disabled

3. 속성 바꿔 보기

size

disabled그룹으로 나눔

const items = [
  { value: null, label: "담당자 선택" },
  { value: "minseo", label: "김민서" },
  …
]

<Select items={items}>
  <SelectTrigger aria-label="담당자">
    <SelectValue />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="minseo">김민서</SelectItem>
    …
  </SelectContent>
</Select>

4. 설치와 사용

npx shadcn@4.23.0 add @adcapsule/select

npm 패키지: @base-ui/react, lucide-react
함께 설치: @adcapsule/utils

처음 쓰는 프로젝트는 @adcapsule/theme를 먼저 설치합니다. Registry 연결

import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"

const items = [{ value: null, label: "담당자 선택" }, { value: "minseo", label: "김민서" }]

<Select items={items}>
  <SelectTrigger aria-label="담당자"><SelectValue /></SelectTrigger>
  <SelectContent>
    <SelectItem value="minseo">김민서</SelectItem>
  </SelectContent>
</Select>

5. 바꿔도 되는 것과 유지할 토큰

제품에서 바꿔도 되는 것

SelectTrigger size: sm·default
items에 value: null 항목을 두면 고르기 전 문구
SelectGroup·SelectLabel·SelectSeparator로 묶음
disabled

공통으로 유지할 토큰

border.strong (테두리)
surface.raised (펼친 목록, --popover)
surface.hover (가리킨 항목, --accent)
control.height.sm·md
radius.md (트리거·펼친 목록 6px, 입력에 맞춤)
radius.sm (목록 항목 4px)

1. 목적과 출처

2. 프리뷰와 변형

3. 속성 바꿔 보기

4. 설치와 사용

5. 바꿔도 되는 것과 유지할 토큰

제품에서 바꿔도 되는 것

공통으로 유지할 토큰

6. 관련 패턴·템플릿

1. 목적과 출처

2. 프리뷰와 변형

3. 속성 바꿔 보기

4. 설치와 사용

5. 바꿔도 되는 것과 유지할 토큰

제품에서 바꿔도 되는 것

공통으로 유지할 토큰

6. 관련 패턴·템플릿