셀렉트

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

사용 지침

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

레이블

도움말

examples/select/SelectDefault.tsx

import { Select } from "@/components/ui/dynamic/select"
import { FieldHint } from "@/components/ui/dynamic/field-message"

레이블

도움말

레이블

도움말

레이블

에러 메시지

레이블

도움말

examples/select/SelectStates.tsx

import { Select } from "@/components/ui/dynamic/select"

const options = [

Small 크기

Medium 크기

Large 크기

examples/select/SelectSizes.tsx

import { Select } from "@/components/ui/dynamic/select"

const sizeOptions = [

examples/select/SelectSorting.tsx

import { Select } from "@/components/ui/dynamic/select"

const sortOptions = [

제어 Select

현재 선택된 값: option2

정렬 기준: 최신순

examples/select/SelectControlled.tsx

"use client"

import * as React from "react"