Select

항상 공정한 Select 컴포넌트. 열 때마다 순서가 바뀝니다.

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

export function SelectDemo() {
  return (
    <Select>
      <SelectTrigger className="w-[180px]">
        <SelectValue placeholder="과일 선택" />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="apple">사과</SelectItem>
        <SelectItem value="banana">바나나</SelectItem>
        <SelectItem value="blueberry">블루베리</SelectItem>
        <SelectItem value="grapes">포도</SelectItem>
        <SelectItem value="pineapple">파인애플</SelectItem>
      </SelectContent>
    </Select>
  )
}

동작 방식

이 컴포넌트는 shadcn/ui와 동일한 합성 컴포넌트 API(Select, SelectTrigger, SelectContent, SelectItem)를 사용하지만, 드롭다운을 열 때마다 옵션 순서가 랜덤으로 섞입니다.

설치

준비 중패키지가 아직 npm에 게시되지 않았습니다.

pnpm add @chadcn/ui

사용법

import "@chadcn/ui/styles.css"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@chadcn/ui"

<Select>
  <SelectTrigger className="w-[180px]">
    <SelectValue placeholder="테마" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="light">라이트</SelectItem>
    <SelectItem value="dark">다크</SelectItem>
    <SelectItem value="system">시스템</SelectItem>
  </SelectContent>
</Select>

준비 중패키지가 아직 npm에 게시되지 않았습니다.

예제

스크롤

항목 목록이 사용 가능한 높이를 초과하면 셀렉트 콘텐츠가 자동으로 스크롤 가능해집니다.

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

export function SelectScrollable() {
  return (
    <Select>
      <SelectTrigger className="w-[280px]">
        <SelectValue placeholder="시간대 선택" />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="est">동부 표준시 (EST)</SelectItem>
        <SelectItem value="cst">중부 표준시 (CST)</SelectItem>
        <SelectItem value="pst">태평양 표준시 (PST)</SelectItem>
        <SelectItem value="kst">한국 표준시 (KST)</SelectItem>
        <SelectItem value="jst">일본 표준시 (JST)</SelectItem>
      </SelectContent>
    </Select>
  )
}

비활성화

disabled prop을 사용하여 상호작용을 방지할 수 있습니다.

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

export function SelectDisabled() {
  return (
    <Select disabled>
      <SelectTrigger className="w-[180px]">
        <SelectValue placeholder="과일 선택" />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="apple">사과</SelectItem>
        <SelectItem value="banana">바나나</SelectItem>
      </SelectContent>
    </Select>
  )
}

API 레퍼런스

자세한 내용은 Radix UI Select 문서를 참고하세요.