Select

버튼으로 트리거되어 사용자가 옵션 목록에서 선택할 수 있게 합니다.

examples/krds/select-demo.tsx

import {
  Select,
  SelectContent,

설치

pnpm dlx shadcn@latest add https://krdscn.gwlee.kr/r/select.json

사용법

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

<Select>
  <SelectTrigger className="w-[180px]">
    <SelectValue placeholder="Theme" />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectItem value="light">Light</SelectItem>
      <SelectItem value="dark">Dark</SelectItem>
      <SelectItem value="system">System</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>

KRDS 정렬

분류: Radix/shadcn Select compound API를 유지하는 KRDS-styled 컴포넌트입니다. SelectTrigger, SelectContent, SelectItem 등 공개 구조를 그대로 사용합니다.
KRDS 적용: trigger 높이, popup surface, focus/invalid 상태가 KRDS form control 기준에 맞춰 조정되어 있습니다.
사용 권장: 복잡한 custom select가 필요할 때 사용하고, 브라우저 기본 select가 더 적합한 폼에는 Native Select 문서를 우선 검토하세요.

구성

다음 조합으로 Select:

Select
├── SelectTrigger
│   └── SelectValue
└── SelectContent
    ├── SelectGroup
    │   ├── SelectLabel
    │   ├── SelectItem
    │   └── SelectItem
    ├── SelectSeparator
    └── SelectGroup
        ├── SelectLabel
        ├── SelectItem
        └── SelectItem

예제

Align Item With Trigger

SelectContent의 position prop으로 정렬 방식을 제어합니다. position="item-aligned"(기본값)은 선택된 항목이 trigger 위로 맞춰지고, position="popper"는 popup이 trigger edge에 맞춰집니다.

Align Item

Toggle to align the item with the trigger.

examples/krds/select-align-item.tsx

"use client"

import * as React from "react"

Groups

SelectGroup, SelectLabel, SelectSeparator로 항목을 그룹화하세요.

examples/krds/select-groups.tsx

import {
  Select,
  SelectContent,

Scrollable

A select with many items that scrolls.

examples/krds/select-scrollable.tsx

import {
  Select,
  SelectContent,

Disabled

examples/krds/select-disabled.tsx

import {
  Select,
  SelectContent,

Invalid

Add the data-invalid attribute to the Field component and the aria-invalid attribute to the SelectTrigger component to show an error state.

<Field data-invalid>
  <FieldLabel>Fruit</FieldLabel>
  <SelectTrigger aria-invalid>
    <SelectValue />
  </SelectTrigger>
</Field>

examples/krds/select-invalid.tsx

import { Field, FieldError, FieldLabel } from "@/components/ui/field"
import {
  Select,

RTL

RTL 지원을 활성화하려면 RTL 설정 가이드를 참고하세요.

examples/krds/select-rtl.tsx

"use client"

import * as React from "react"

API 참조

Radix UI Select API 문서를 참고하세요.

Scroll Area Separator