셀렉트

셀렉트 (Select)

버튼으로 열리는 목록에서 사용자가 하나의 옵션을 고르게 해 주는 컴포넌트예요. 여러 선택지 중에서 한 가지를 골라야 할 때, 드롭다운 형태로 깔끔하게 보여주는 용도로 사용해요. 폼이나 설정 화면에서 자주 쓰여요.

출처: 문서

본문

설치하기

npx shadcn@latest add select

npm install @radix-ui/react-select

사용하기

컴포넌트를 import 하고,

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

다음 구조로 조립하면 돼요. SelectTrigger가 선택을 열고 닫는 버튼이고, SelectValue가 현재 선택된 값을 보여줘요. 목록은 SelectContent 안에 SelectItem으로 채워요. 아직 아무것도 선택되지 않았을 때는 SelectValue의 placeholder가 대신 보여요.

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

예시

스크롤 가능

폼