rayan/shadcn-ui
1
0
Fork 0
mirror of https://github.com/shadcn-ui/ui.git synced 2026-07-09 06:55:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add native-select

Browse Source
This commit is contained in:
shadcn
2026-01-19 16:41:52 +04:00
parent 1fd52c41f9
commit 40e5bf5eff
15 changed files with 44 additions and 700 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
apps/v4/content/docs/components/base/native-select.mdx
View File

@@ -66,91 +66,34 @@ import {
<NativeSelectOption value="apple">Apple</NativeSelectOption>
<NativeSelectOption value="banana">Banana</NativeSelectOption>
<NativeSelectOption value="blueberry">Blueberry</NativeSelectOption>
<NativeSelectOption value="grapes" disabled>
Grapes
</NativeSelectOption>
<NativeSelectOption value="pineapple">Pineapple</NativeSelectOption>
</NativeSelect>
```
## Examples
### With Groups
### Groups
Organize options using `NativeSelectOptGroup` for better categorization.
Use `NativeSelectOptGroup` to organize options into categories.
<ComponentPreview styleName="base-nova" name="native-select-groups" />
```tsx showLineNumbers
<NativeSelect>
<NativeSelectOption value="">Select a food</NativeSelectOption>
<NativeSelectOptGroup label="Fruits">
<NativeSelectOption value="apple">Apple</NativeSelectOption>
<NativeSelectOption value="banana">Banana</NativeSelectOption>
<NativeSelectOption value="blueberry">Blueberry</NativeSelectOption>
</NativeSelectOptGroup>
<NativeSelectOptGroup label="Vegetables">
<NativeSelectOption value="carrot">Carrot</NativeSelectOption>
<NativeSelectOption value="broccoli">Broccoli</NativeSelectOption>
<NativeSelectOption value="spinach">Spinach</NativeSelectOption>
</NativeSelectOptGroup>
</NativeSelect>
```
### Disabled
### Disabled State
Disable individual options or the entire select component.
Add the `disabled` prop to the `NativeSelect` component to disable the select.
<ComponentPreview styleName="base-nova" name="native-select-disabled" />
### Invalid State
### Invalid
Show validation errors with the `aria-invalid` attribute and error styling.
Use `aria-invalid` to show validation errors and the `data-invalid` attribute to the `Field` component for styling.
<ComponentPreview styleName="base-nova" name="native-select-invalid" />
```tsx showLineNumbers
<NativeSelect aria-invalid="true">
<NativeSelectOption value="">Select a country</NativeSelectOption>
<NativeSelectOption value="us">United States</NativeSelectOption>
<NativeSelectOption value="uk">United Kingdom</NativeSelectOption>
<NativeSelectOption value="ca">Canada</NativeSelectOption>
</NativeSelect>
```
### Form Integration
Use with form libraries like React Hook Form for controlled components.
<ComponentPreview styleName="base-nova" name="native-select-form" />
### Input Group Integration
Combine with `InputGroup` for complex input layouts.
<ComponentPreview styleName="base-nova" name="native-select-input-group" />
## Native Select vs Select
- Use `NativeSelect` when you need native browser behavior, better performance, or mobile-optimized dropdowns.
- Use `Select` when you need custom styling, animations, or complex interactions.
The `NativeSelect` component provides native HTML select functionality with consistent styling that matches your design system.
## Accessibility
- The component maintains all native HTML select accessibility features.
- Screen readers can navigate through options using arrow keys.
- The chevron icon is marked as `aria-hidden="true"` to avoid duplication.
- Use `aria-label` or `aria-labelledby` for additional context when needed.
```tsx showLineNumbers
<NativeSelect aria-label="Choose your preferred language">
<NativeSelectOption value="en">English</NativeSelectOption>
<NativeSelectOption value="es">Spanish</NativeSelectOption>
<NativeSelectOption value="fr">French</NativeSelectOption>
</NativeSelect>
```
- Use `NativeSelect` for native browser behavior, better performance, or mobile-optimized dropdowns.
- Use `Select` for custom styling, animations, or complex interactions.
## API Reference
@@ -158,12 +101,6 @@ The `NativeSelect` component provides native HTML select functionality with cons
The main select component that wraps the native HTML select element.
| Prop | Type | Default |
| ----------- | -------- | ------- |
| `className` | `string` | |
All other props are passed through to the underlying `<select>` element.
```tsx
<NativeSelect>
<NativeSelectOption value="option1">Option 1</NativeSelectOption>
@@ -175,32 +112,19 @@ All other props are passed through to the underlying `<select>` element.
Represents an individual option within the select.
| Prop | Type | Default |
| ----------- | --------- | ------- |
| `value` | `string` | |
| `disabled` | `boolean` | `false` |
| `className` | `string` | |
All other props are passed through to the underlying `<option>` element.
```tsx
<NativeSelectOption value="apple">Apple</NativeSelectOption>
<NativeSelectOption value="banana" disabled>
Banana
</NativeSelectOption>
```
| Prop | Type | Default |
| ---------- | --------- | ------- |
| `value` | `string` | |
| `disabled` | `boolean` | `false` |
### NativeSelectOptGroup
Groups related options together for better organization.
| Prop | Type | Default |
| ----------- | --------- | ------- |
| `label` | `string` | |
| `disabled` | `boolean` | `false` |
| `className` | `string` | |
All other props are passed through to the underlying `<optgroup>` element.
| Prop | Type | Default |
| ---------- | --------- | ------- |
| `label` | `string` | |
| `disabled` | `boolean` | `false` |
```tsx
<NativeSelectOptGroup label="Fruits">