---
title: Native Select
description: 样式统一的原生 HTML 下拉选择组件。
component: true
---
import { InfoIcon } from "lucide-react"
}>
如需完全自定义样式的选择器，请参考 [Select](/docs/components/select) 组件。
```tsx
import {
NativeSelect,
NativeSelectOption,
} from "@/components/ui/native-select"
export function NativeSelectDemo() {
return (
Select status
Todo
In Progress
Done
Cancelled
)
}
```
## 安装
CLI
手动
```bash
npx shadcn@latest add native-select
```
将下面的代码复制到你的项目中。
根据项目结构调整导入路径。
## 用法
```tsx showLineNumbers
import {
NativeSelect,
NativeSelectOptGroup,
NativeSelectOption,
} from "@/components/ui/native-select"
```
```tsx showLineNumbers
选择水果
苹果
香蕉
蓝莓
葡萄
菠萝
```
## 示例
### With Groups
使用 `NativeSelectOptGroup` 对选项进行分组。
```tsx
import {
NativeSelect,
NativeSelectOptGroup,
NativeSelectOption,
} from "@/components/ui/native-select"
export function NativeSelectGroups() {
return (
Select department
Frontend
Backend
DevOps
Sales Rep
Account Manager
Sales Director
Customer Support
Product Manager
Operations Manager
)
}
```
```tsx showLineNumbers
选择食物
苹果
香蕉
蓝莓
胡萝卜
西兰花
菠菜
```
### Disabled State
可以禁用单个选项或整个选择器。
```tsx
import {
NativeSelect,
NativeSelectOption,
} from "@/components/ui/native-select"
export function NativeSelectDisabled() {
return (
Select priority
Low
Medium
High
Critical
)
}
```
### Invalid State
通过 `aria-invalid` 属性及错误样式展示校验结果。
```tsx
import {
NativeSelect,
NativeSelectOption,
} from "@/components/ui/native-select"
export function NativeSelectInvalid() {
return (
Select role
Admin
Editor
Viewer
Guest
)
}
```
```tsx showLineNumbers
选择国家
美国
英国
加拿大
```
### Form Integration
Use with form libraries like React Hook Form for controlled components.
### Input Group Integration
Combine with `InputGroup` for complex input layouts.
## Native Select vs Select
- 需要原生交互、性能更佳或移动端优化时，使用 `NativeSelect`。
- 需要自定义样式、动效或复杂交互时，使用 `Select`。
`NativeSelect` 在保持原生 `