原生选择器

}> For a styled select component, see the Select component.

安装

Command

Manual

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

将以下代码复制到你的项目中。

View complete source: components/ui/native-select.tsx

根据项目配置更新导入路径。

用法

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

<NativeSelect>
  <NativeSelectOption value="">Select a fruit</NativeSelectOption>
  <NativeSelectOption value="apple">Apple</NativeSelectOption>
  <NativeSelectOption value="banana">Banana</NativeSelectOption>
  <NativeSelectOption value="blueberry">Blueberry</NativeSelectOption>
  <NativeSelectOption value="pineapple">Pineapple</NativeSelectOption>
</NativeSelect>

Composition

Simple

Options placed directly under NativeSelect (no NativeSelectOptGroup).

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

With groups

Use NativeSelectOptGroup to organize options into categories.

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

Groups

Use NativeSelectOptGroup to organize options into categories.

Disabled

Add the disabled prop to the NativeSelect component to disable the select.

Invalid

Use aria-invalid to show validation errors and the data-invalid attribute to the Field component for styling.

Native Select vs Select

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

从右到左布局

To enable RTL support in JGuang UI, see the RTL configuration guide.

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.

Prop	Type	Default
value	string
disabled	boolean	false

NativeSelectOptGroup

Groups related options together for better organization.

Prop	Type	Default
label	string
disabled	boolean	false

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