Native Select

디자인 시스템과 일관되게 통합된 스타일 적용 네이티브 HTML select 요소입니다.

커스텀 팝업 스타일이 필요한 경우 Select 컴포넌트를 사용하세요.

examples/krds/native-select-demo.tsx

import {
  NativeSelect,
  NativeSelectOption,

설치

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

사용법

import {
  NativeSelect,
  NativeSelectOptGroup,
  NativeSelectOption,
} from "@/components/ui/native-select"

<NativeSelect>
  <NativeSelectOption value="">지역 선택</NativeSelectOption>
  <NativeSelectOption value="seoul">서울특별시</NativeSelectOption>
  <NativeSelectOption value="busan">부산광역시</NativeSelectOption>
  <NativeSelectOption value="daejeon">대전광역시</NativeSelectOption>
  <NativeSelectOption value="jeju">제주특별자치도</NativeSelectOption>
</NativeSelect>

구성

단순

NativeSelectOptGroup 없이 option을 직접 배치합니다.

NativeSelect
├── NativeSelectOption
├── NativeSelectOption
├── NativeSelectOption
└── NativeSelectOption

그룹 포함

NativeSelectOptGroup으로 옵션을 범주별로 묶습니다.

NativeSelect
├── NativeSelectOptGroup
│   ├── NativeSelectOption
│   └── NativeSelectOption
└── NativeSelectOptGroup
    ├── NativeSelectOption
    └── NativeSelectOption

예제

그룹

NativeSelectOptGroup으로 옵션을 범주별로 묶습니다.

examples/krds/native-select-groups.tsx

import {
  NativeSelect,
  NativeSelectOptGroup,

비활성

disabled prop으로 select를 비활성화합니다.

examples/krds/native-select-disabled.tsx

import {
  NativeSelect,
  NativeSelectOption,

오류

aria-invalid와 Field의 data-invalid 속성으로 검증 오류 상태를 표시합니다.

examples/krds/native-select-invalid.tsx

import {
  NativeSelect,
  NativeSelectOption,

Native Select와 Select 비교

Use NativeSelect for native browser behavior, better performance, or mobile-optimized dropdowns.
Use Select for custom styling, animations, or complex interactions.

RTL

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

examples/krds/native-select-rtl.tsx

"use client"

import * as React from "react"

API 참조

NativeSelect

The main select component that wraps the native HTML select element.

<NativeSelect>
  <NativeSelectOption value="option1">Option 1</NativeSelectOption>
  <NativeSelectOption value="option2">Option 2</NativeSelectOption>
</NativeSelect>

NativeSelectOption

Represents an individual option within the select.

속성	타입	기본값
`value`	`string`
`disabled`	`boolean`	`false`

NativeSelectOptGroup

Groups related options together for better organization.

속성	타입	기본값
`label`	`string`
`disabled`	`boolean`	`false`

<NativeSelectOptGroup label="Fruits">
  <NativeSelectOption value="apple">Apple</NativeSelectOption>
  <NativeSelectOption value="banana">Banana</NativeSelectOption>
</NativeSelectOptGroup>

Menubar Navigation Menu