셀렉트

셀렉트는 사용자에게 여러 개의 옵션 목록을 팝업으로 제공하여 그 중 한 개의 값을 선택할 수 있도록 하는 경우에 사용한다.

사용 지침

옵션 수가 많아 라디오로 펼치기 부담스러울 때 사용하고, 옵션 수가 적고 항상 노출이 더 효율적인 경우에는 라디오 버튼 사용을 우선 검토합니다.

예제

기본

레이블

도움말

examples/select/SelectDefault.tsx

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

상태

레이블

도움말

레이블

도움말

레이블

에러 메시지

레이블

도움말

examples/select/SelectStates.tsx

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

const options = [

크기

Small 크기

Medium 크기

Large 크기

examples/select/SelectSizes.tsx

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

const sizeOptions = [

정렬

examples/select/SelectSorting.tsx

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

const sortOptions = [

제어 상태

제어 Select

현재 선택된 값: option2

정렬 기준: 최신순

examples/select/SelectControlled.tsx

"use client"

import * as React from "react"

속성

이름	타입	기본값	설명
aria-describedby	string	—	—
aria-invalid	boolean	—	—
autoComplete	string	—	—
className	string	—	—
defaultOpen	boolean	—	—
defaultValue	string	—	—
dir	enum	—	—
disabled	boolean	—	—
error	ReactNode	—	—
form	string	—	—
hint	ReactNode	—	—
id	string	—	—
information	ReactNode	—	—
label	ReactNode	—	—
name	string	—	—
onOpenChange	((open: boolean) => void)	—	—
onValueChange	((value: string) => void)	—	—
open	boolean	—	—
required	boolean	—	—
size	enum	large	—
success	ReactNode	—	—
value	string	—	—
variant	enum	default	—

체크박스 태그