Native select
浏览器原生的 select，置于 Input 的输入槽中，配以 zzzUI 的下拉箭头。
安装
# once per project: where @zzzui items come frompnpm dlx shadcn@latest registry add @zzzui=https://zzzui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zzzui/native-select示例
分为两组的区域
import { Field, FieldLabel } from "@/components/zero/field";import { NativeSelect, NativeSelectOptGroup, NativeSelectOption,} from "@/components/zero/native-select";export default function NativeSelectDistrict() { return ( <Field className="w-full max-w-xs"> <FieldLabel>District</FieldLabel> <NativeSelect defaultValue="harbor"> <NativeSelectOptGroup label="East"> <NativeSelectOption value="harbor">Harbor</NativeSelectOption> <NativeSelectOption value="rail-yards">Rail yards</NativeSelectOption> </NativeSelectOptGroup> <NativeSelectOptGroup label="West"> <NativeSelectOption value="old-market">Old market</NativeSelectOption> <NativeSelectOption value="canal-docks"> Canal docks </NativeSelectOption> </NativeSelectOptGroup> </NativeSelect> </Field> );}行为
表单须在禁用 JavaScript 时仍可使用，或需要调用手机原生选择器时，适合使用此组件。其下拉列表由浏览器绘制，不带 zzzUI 的外观；需要该外观时，请使用 Select。
属性
NativeSelect
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| size | "sm" | "md" | "lg" | "md" | 与 Input 相同的高度档位。 |
| cut | "end" | "start" | "both" | "none" | "end" | 斜切哪一侧。 |