mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-06-15 11:51:34 +00:00
feat: add native-select
This commit is contained in:
shadcn
@@ -58,9 +58,9 @@ npm install @base-ui/react
|
||||
import {
|
||||
Menubar,
|
||||
MenubarContent,
|
||||
MenubarGroup,
|
||||
MenubarItem,
|
||||
MenubarMenu,
|
||||
MenubarGroup,
|
||||
MenubarSeparator,
|
||||
MenubarShortcut,
|
||||
MenubarTrigger,
|
||||
@@ -72,11 +72,11 @@ import {
|
||||
<MenubarMenu>
|
||||
<MenubarTrigger>File</MenubarTrigger>
|
||||
<MenubarContent>
|
||||
<MenubarGroup>
|
||||
<MenubarItem>
|
||||
New Tab <MenubarShortcut>⌘T</MenubarShortcut>
|
||||
</MenubarItem>
|
||||
<MenubarItem>New Window</MenubarItem>
|
||||
<MenubarGroup>
|
||||
<MenubarItem>
|
||||
New Tab <MenubarShortcut>⌘T</MenubarShortcut>
|
||||
</MenubarItem>
|
||||
<MenubarItem>New Window</MenubarItem>
|
||||
</MenubarGroup>
|
||||
<MenubarSeparator />
|
||||
<MenubarGroup>
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -58,9 +58,9 @@ npm install radix-ui
|
||||
import {
|
||||
Menubar,
|
||||
MenubarContent,
|
||||
MenubarGroup,
|
||||
MenubarItem,
|
||||
MenubarMenu,
|
||||
MenubarGroup,
|
||||
MenubarSeparator,
|
||||
MenubarShortcut,
|
||||
MenubarTrigger,
|
||||
@@ -72,11 +72,11 @@ import {
|
||||
<MenubarMenu>
|
||||
<MenubarTrigger>File</MenubarTrigger>
|
||||
<MenubarContent>
|
||||
<MenubarGroup>
|
||||
<MenubarItem>
|
||||
New Tab <MenubarShortcut>⌘T</MenubarShortcut>
|
||||
</MenubarItem>
|
||||
<MenubarItem>New Window</MenubarItem>
|
||||
<MenubarGroup>
|
||||
<MenubarItem>
|
||||
New Tab <MenubarShortcut>⌘T</MenubarShortcut>
|
||||
</MenubarItem>
|
||||
<MenubarItem>New Window</MenubarItem>
|
||||
</MenubarGroup>
|
||||
<MenubarSeparator />
|
||||
<MenubarGroup>
|
||||
|
||||
@@ -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="radix-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="radix-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="radix-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="radix-nova" name="native-select-form" />
|
||||
|
||||
### Input Group Integration
|
||||
|
||||
Combine with `InputGroup` for complex input layouts.
|
||||
|
||||
<ComponentPreview styleName="radix-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">
|
||||
|
||||
@@ -3294,19 +3294,6 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"native-select-basic": {
|
||||
name: "native-select-basic",
|
||||
filePath: "examples/radix/native-select-basic.tsx",
|
||||
component: React.lazy(async () => {
|
||||
const mod = await import("./radix/native-select-basic")
|
||||
const exportName =
|
||||
Object.keys(mod).find(
|
||||
(key) =>
|
||||
typeof mod[key] === "function" || typeof mod[key] === "object"
|
||||
) || "native-select-basic"
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"native-select-demo": {
|
||||
name: "native-select-demo",
|
||||
filePath: "examples/radix/native-select-demo.tsx",
|
||||
@@ -3333,19 +3320,6 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"native-select-fields": {
|
||||
name: "native-select-fields",
|
||||
filePath: "examples/radix/native-select-fields.tsx",
|
||||
component: React.lazy(async () => {
|
||||
const mod = await import("./radix/native-select-fields")
|
||||
const exportName =
|
||||
Object.keys(mod).find(
|
||||
(key) =>
|
||||
typeof mod[key] === "function" || typeof mod[key] === "object"
|
||||
) || "native-select-fields"
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"native-select-groups": {
|
||||
name: "native-select-groups",
|
||||
filePath: "examples/radix/native-select-groups.tsx",
|
||||
@@ -3372,45 +3346,6 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"native-select-sizes": {
|
||||
name: "native-select-sizes",
|
||||
filePath: "examples/radix/native-select-sizes.tsx",
|
||||
component: React.lazy(async () => {
|
||||
const mod = await import("./radix/native-select-sizes")
|
||||
const exportName =
|
||||
Object.keys(mod).find(
|
||||
(key) =>
|
||||
typeof mod[key] === "function" || typeof mod[key] === "object"
|
||||
) || "native-select-sizes"
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"native-select-with-field": {
|
||||
name: "native-select-with-field",
|
||||
filePath: "examples/radix/native-select-with-field.tsx",
|
||||
component: React.lazy(async () => {
|
||||
const mod = await import("./radix/native-select-with-field")
|
||||
const exportName =
|
||||
Object.keys(mod).find(
|
||||
(key) =>
|
||||
typeof mod[key] === "function" || typeof mod[key] === "object"
|
||||
) || "native-select-with-field"
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"native-select-with-groups": {
|
||||
name: "native-select-with-groups",
|
||||
filePath: "examples/radix/native-select-with-groups.tsx",
|
||||
component: React.lazy(async () => {
|
||||
const mod = await import("./radix/native-select-with-groups")
|
||||
const exportName =
|
||||
Object.keys(mod).find(
|
||||
(key) =>
|
||||
typeof mod[key] === "function" || typeof mod[key] === "object"
|
||||
) || "native-select-with-groups"
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"navigation-menu-demo": {
|
||||
name: "navigation-menu-demo",
|
||||
filePath: "examples/radix/navigation-menu-demo.tsx",
|
||||
@@ -9109,19 +9044,6 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"native-select-basic": {
|
||||
name: "native-select-basic",
|
||||
filePath: "examples/base/native-select-basic.tsx",
|
||||
component: React.lazy(async () => {
|
||||
const mod = await import("./base/native-select-basic")
|
||||
const exportName =
|
||||
Object.keys(mod).find(
|
||||
(key) =>
|
||||
typeof mod[key] === "function" || typeof mod[key] === "object"
|
||||
) || "native-select-basic"
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"native-select-demo": {
|
||||
name: "native-select-demo",
|
||||
filePath: "examples/base/native-select-demo.tsx",
|
||||
@@ -9148,19 +9070,6 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"native-select-fields": {
|
||||
name: "native-select-fields",
|
||||
filePath: "examples/base/native-select-fields.tsx",
|
||||
component: React.lazy(async () => {
|
||||
const mod = await import("./base/native-select-fields")
|
||||
const exportName =
|
||||
Object.keys(mod).find(
|
||||
(key) =>
|
||||
typeof mod[key] === "function" || typeof mod[key] === "object"
|
||||
) || "native-select-fields"
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"native-select-groups": {
|
||||
name: "native-select-groups",
|
||||
filePath: "examples/base/native-select-groups.tsx",
|
||||
@@ -9187,45 +9096,6 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"native-select-sizes": {
|
||||
name: "native-select-sizes",
|
||||
filePath: "examples/base/native-select-sizes.tsx",
|
||||
component: React.lazy(async () => {
|
||||
const mod = await import("./base/native-select-sizes")
|
||||
const exportName =
|
||||
Object.keys(mod).find(
|
||||
(key) =>
|
||||
typeof mod[key] === "function" || typeof mod[key] === "object"
|
||||
) || "native-select-sizes"
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"native-select-with-field": {
|
||||
name: "native-select-with-field",
|
||||
filePath: "examples/base/native-select-with-field.tsx",
|
||||
component: React.lazy(async () => {
|
||||
const mod = await import("./base/native-select-with-field")
|
||||
const exportName =
|
||||
Object.keys(mod).find(
|
||||
(key) =>
|
||||
typeof mod[key] === "function" || typeof mod[key] === "object"
|
||||
) || "native-select-with-field"
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"native-select-with-groups": {
|
||||
name: "native-select-with-groups",
|
||||
filePath: "examples/base/native-select-with-groups.tsx",
|
||||
component: React.lazy(async () => {
|
||||
const mod = await import("./base/native-select-with-groups")
|
||||
const exportName =
|
||||
Object.keys(mod).find(
|
||||
(key) =>
|
||||
typeof mod[key] === "function" || typeof mod[key] === "object"
|
||||
) || "native-select-with-groups"
|
||||
return { default: mod.default || mod[exportName] }
|
||||
}),
|
||||
},
|
||||
"navigation-menu-basic": {
|
||||
name: "navigation-menu-basic",
|
||||
filePath: "examples/base/navigation-menu-basic.tsx",
|
||||
|
||||
@@ -1,19 +0,0 @@
|
||||
import {
|
||||
NativeSelect,
|
||||
NativeSelectOption,
|
||||
} from "@/examples/base/ui/native-select"
|
||||
|
||||
export function NativeSelectBasic() {
|
||||
return (
|
||||
<NativeSelect>
|
||||
<NativeSelectOption value="">Select a fruit</NativeSelectOption>
|
||||
<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>
|
||||
)
|
||||
}
|
||||
@@ -1,101 +0,0 @@
|
||||
import {
|
||||
Field,
|
||||
FieldDescription,
|
||||
FieldGroup,
|
||||
FieldLabel,
|
||||
} from "@/examples/base/ui/field"
|
||||
import {
|
||||
NativeSelect,
|
||||
NativeSelectOptGroup,
|
||||
NativeSelectOption,
|
||||
} from "@/examples/base/ui/native-select"
|
||||
import { Select } from "@/examples/base/ui/select"
|
||||
|
||||
export function NativeSelectFields() {
|
||||
return (
|
||||
<FieldGroup>
|
||||
<Field>
|
||||
<FieldLabel htmlFor="native-select-basic">
|
||||
Basic Native Select
|
||||
</FieldLabel>
|
||||
<NativeSelect id="native-select-basic">
|
||||
<NativeSelectOption value="">Choose an option</NativeSelectOption>
|
||||
<NativeSelectOption value="option1">Option 1</NativeSelectOption>
|
||||
<NativeSelectOption value="option2">Option 2</NativeSelectOption>
|
||||
<NativeSelectOption value="option3">Option 3</NativeSelectOption>
|
||||
</NativeSelect>
|
||||
</Field>
|
||||
<Field>
|
||||
<FieldLabel htmlFor="native-select-country">Country</FieldLabel>
|
||||
<NativeSelect id="native-select-country">
|
||||
<NativeSelectOption value="">Select your country</NativeSelectOption>
|
||||
<NativeSelectOption value="us">United States</NativeSelectOption>
|
||||
<NativeSelectOption value="uk">United Kingdom</NativeSelectOption>
|
||||
<NativeSelectOption value="ca">Canada</NativeSelectOption>
|
||||
</NativeSelect>
|
||||
<FieldDescription>
|
||||
Select the country where you currently reside.
|
||||
</FieldDescription>
|
||||
</Field>
|
||||
<Field>
|
||||
<FieldLabel htmlFor="native-select-timezone">Timezone</FieldLabel>
|
||||
<FieldDescription>
|
||||
Choose your local timezone for accurate scheduling.
|
||||
</FieldDescription>
|
||||
<NativeSelect id="native-select-timezone">
|
||||
<NativeSelectOption value="">Select timezone</NativeSelectOption>
|
||||
<NativeSelectOption value="utc">UTC</NativeSelectOption>
|
||||
<NativeSelectOption value="est">Eastern Time</NativeSelectOption>
|
||||
<NativeSelectOption value="pst">Pacific Time</NativeSelectOption>
|
||||
</NativeSelect>
|
||||
</Field>
|
||||
<Field>
|
||||
<FieldLabel htmlFor="native-select-grouped">Grouped Options</FieldLabel>
|
||||
<NativeSelect id="native-select-grouped">
|
||||
<NativeSelectOption value="">Select a region</NativeSelectOption>
|
||||
<NativeSelectOptGroup label="North America">
|
||||
<NativeSelectOption value="us">United States</NativeSelectOption>
|
||||
<NativeSelectOption value="ca">Canada</NativeSelectOption>
|
||||
<NativeSelectOption value="mx">Mexico</NativeSelectOption>
|
||||
</NativeSelectOptGroup>
|
||||
<NativeSelectOptGroup label="Europe">
|
||||
<NativeSelectOption value="uk">United Kingdom</NativeSelectOption>
|
||||
<NativeSelectOption value="fr">France</NativeSelectOption>
|
||||
<NativeSelectOption value="de">Germany</NativeSelectOption>
|
||||
</NativeSelectOptGroup>
|
||||
</NativeSelect>
|
||||
<FieldDescription>
|
||||
Native select with grouped options using optgroup.
|
||||
</FieldDescription>
|
||||
</Field>
|
||||
<Field data-invalid>
|
||||
<FieldLabel htmlFor="native-select-invalid">
|
||||
Invalid Native Select
|
||||
</FieldLabel>
|
||||
<NativeSelect id="native-select-invalid" aria-invalid>
|
||||
<NativeSelectOption value="">
|
||||
This field has an error
|
||||
</NativeSelectOption>
|
||||
<NativeSelectOption value="option1">Option 1</NativeSelectOption>
|
||||
<NativeSelectOption value="option2">Option 2</NativeSelectOption>
|
||||
<NativeSelectOption value="option3">Option 3</NativeSelectOption>
|
||||
</NativeSelect>
|
||||
<FieldDescription>
|
||||
This field contains validation errors.
|
||||
</FieldDescription>
|
||||
</Field>
|
||||
<Field data-disabled>
|
||||
<FieldLabel htmlFor="native-select-disabled-field">
|
||||
Disabled Field
|
||||
</FieldLabel>
|
||||
<NativeSelect id="native-select-disabled-field" disabled>
|
||||
<NativeSelectOption value="">Cannot select</NativeSelectOption>
|
||||
<NativeSelectOption value="option1">Option 1</NativeSelectOption>
|
||||
<NativeSelectOption value="option2">Option 2</NativeSelectOption>
|
||||
<NativeSelectOption value="option3">Option 3</NativeSelectOption>
|
||||
</NativeSelect>
|
||||
<FieldDescription>This field is currently disabled.</FieldDescription>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
)
|
||||
}
|
||||
@@ -1,23 +0,0 @@
|
||||
import {
|
||||
NativeSelect,
|
||||
NativeSelectOption,
|
||||
} from "@/examples/base/ui/native-select"
|
||||
|
||||
export function NativeSelectSizes() {
|
||||
return (
|
||||
<div className="flex flex-col gap-4">
|
||||
<NativeSelect size="sm">
|
||||
<NativeSelectOption value="">Select a fruit</NativeSelectOption>
|
||||
<NativeSelectOption value="apple">Apple</NativeSelectOption>
|
||||
<NativeSelectOption value="banana">Banana</NativeSelectOption>
|
||||
<NativeSelectOption value="blueberry">Blueberry</NativeSelectOption>
|
||||
</NativeSelect>
|
||||
<NativeSelect size="default">
|
||||
<NativeSelectOption value="">Select a fruit</NativeSelectOption>
|
||||
<NativeSelectOption value="apple">Apple</NativeSelectOption>
|
||||
<NativeSelectOption value="banana">Banana</NativeSelectOption>
|
||||
<NativeSelectOption value="blueberry">Blueberry</NativeSelectOption>
|
||||
</NativeSelect>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,21 +0,0 @@
|
||||
import { Field, FieldDescription, FieldLabel } from "@/examples/base/ui/field"
|
||||
import {
|
||||
NativeSelect,
|
||||
NativeSelectOption,
|
||||
} from "@/examples/base/ui/native-select"
|
||||
|
||||
export function NativeSelectWithField() {
|
||||
return (
|
||||
<Field>
|
||||
<FieldLabel htmlFor="native-select-country">Country</FieldLabel>
|
||||
<NativeSelect id="native-select-country">
|
||||
<NativeSelectOption value="">Select a country</NativeSelectOption>
|
||||
<NativeSelectOption value="us">United States</NativeSelectOption>
|
||||
<NativeSelectOption value="uk">United Kingdom</NativeSelectOption>
|
||||
<NativeSelectOption value="ca">Canada</NativeSelectOption>
|
||||
<NativeSelectOption value="au">Australia</NativeSelectOption>
|
||||
</NativeSelect>
|
||||
<FieldDescription>Select your country of residence.</FieldDescription>
|
||||
</Field>
|
||||
)
|
||||
}
|
||||
@@ -1,23 +0,0 @@
|
||||
import {
|
||||
NativeSelect,
|
||||
NativeSelectOptGroup,
|
||||
NativeSelectOption,
|
||||
} from "@/examples/base/ui/native-select"
|
||||
|
||||
export function NativeSelectWithGroups() {
|
||||
return (
|
||||
<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>
|
||||
)
|
||||
}
|
||||
@@ -1,19 +0,0 @@
|
||||
import {
|
||||
NativeSelect,
|
||||
NativeSelectOption,
|
||||
} from "@/examples/radix/ui/native-select"
|
||||
|
||||
export function NativeSelectBasic() {
|
||||
return (
|
||||
<NativeSelect>
|
||||
<NativeSelectOption value="">Select a fruit</NativeSelectOption>
|
||||
<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>
|
||||
)
|
||||
}
|
||||
@@ -1,101 +0,0 @@
|
||||
import {
|
||||
Field,
|
||||
FieldDescription,
|
||||
FieldGroup,
|
||||
FieldLabel,
|
||||
} from "@/examples/radix/ui/field"
|
||||
import {
|
||||
NativeSelect,
|
||||
NativeSelectOptGroup,
|
||||
NativeSelectOption,
|
||||
} from "@/examples/radix/ui/native-select"
|
||||
import { Select } from "@/examples/radix/ui/select"
|
||||
|
||||
export function NativeSelectFields() {
|
||||
return (
|
||||
<FieldGroup>
|
||||
<Field>
|
||||
<FieldLabel htmlFor="native-select-basic">
|
||||
Basic Native Select
|
||||
</FieldLabel>
|
||||
<NativeSelect id="native-select-basic">
|
||||
<NativeSelectOption value="">Choose an option</NativeSelectOption>
|
||||
<NativeSelectOption value="option1">Option 1</NativeSelectOption>
|
||||
<NativeSelectOption value="option2">Option 2</NativeSelectOption>
|
||||
<NativeSelectOption value="option3">Option 3</NativeSelectOption>
|
||||
</NativeSelect>
|
||||
</Field>
|
||||
<Field>
|
||||
<FieldLabel htmlFor="native-select-country">Country</FieldLabel>
|
||||
<NativeSelect id="native-select-country">
|
||||
<NativeSelectOption value="">Select your country</NativeSelectOption>
|
||||
<NativeSelectOption value="us">United States</NativeSelectOption>
|
||||
<NativeSelectOption value="uk">United Kingdom</NativeSelectOption>
|
||||
<NativeSelectOption value="ca">Canada</NativeSelectOption>
|
||||
</NativeSelect>
|
||||
<FieldDescription>
|
||||
Select the country where you currently reside.
|
||||
</FieldDescription>
|
||||
</Field>
|
||||
<Field>
|
||||
<FieldLabel htmlFor="native-select-timezone">Timezone</FieldLabel>
|
||||
<FieldDescription>
|
||||
Choose your local timezone for accurate scheduling.
|
||||
</FieldDescription>
|
||||
<NativeSelect id="native-select-timezone">
|
||||
<NativeSelectOption value="">Select timezone</NativeSelectOption>
|
||||
<NativeSelectOption value="utc">UTC</NativeSelectOption>
|
||||
<NativeSelectOption value="est">Eastern Time</NativeSelectOption>
|
||||
<NativeSelectOption value="pst">Pacific Time</NativeSelectOption>
|
||||
</NativeSelect>
|
||||
</Field>
|
||||
<Field>
|
||||
<FieldLabel htmlFor="native-select-grouped">Grouped Options</FieldLabel>
|
||||
<NativeSelect id="native-select-grouped">
|
||||
<NativeSelectOption value="">Select a region</NativeSelectOption>
|
||||
<NativeSelectOptGroup label="North America">
|
||||
<NativeSelectOption value="us">United States</NativeSelectOption>
|
||||
<NativeSelectOption value="ca">Canada</NativeSelectOption>
|
||||
<NativeSelectOption value="mx">Mexico</NativeSelectOption>
|
||||
</NativeSelectOptGroup>
|
||||
<NativeSelectOptGroup label="Europe">
|
||||
<NativeSelectOption value="uk">United Kingdom</NativeSelectOption>
|
||||
<NativeSelectOption value="fr">France</NativeSelectOption>
|
||||
<NativeSelectOption value="de">Germany</NativeSelectOption>
|
||||
</NativeSelectOptGroup>
|
||||
</NativeSelect>
|
||||
<FieldDescription>
|
||||
Native select with grouped options using optgroup.
|
||||
</FieldDescription>
|
||||
</Field>
|
||||
<Field data-invalid>
|
||||
<FieldLabel htmlFor="native-select-invalid">
|
||||
Invalid Native Select
|
||||
</FieldLabel>
|
||||
<NativeSelect id="native-select-invalid" aria-invalid>
|
||||
<NativeSelectOption value="">
|
||||
This field has an error
|
||||
</NativeSelectOption>
|
||||
<NativeSelectOption value="option1">Option 1</NativeSelectOption>
|
||||
<NativeSelectOption value="option2">Option 2</NativeSelectOption>
|
||||
<NativeSelectOption value="option3">Option 3</NativeSelectOption>
|
||||
</NativeSelect>
|
||||
<FieldDescription>
|
||||
This field contains validation errors.
|
||||
</FieldDescription>
|
||||
</Field>
|
||||
<Field data-disabled>
|
||||
<FieldLabel htmlFor="native-select-disabled-field">
|
||||
Disabled Field
|
||||
</FieldLabel>
|
||||
<NativeSelect id="native-select-disabled-field" disabled>
|
||||
<NativeSelectOption value="">Cannot select</NativeSelectOption>
|
||||
<NativeSelectOption value="option1">Option 1</NativeSelectOption>
|
||||
<NativeSelectOption value="option2">Option 2</NativeSelectOption>
|
||||
<NativeSelectOption value="option3">Option 3</NativeSelectOption>
|
||||
</NativeSelect>
|
||||
<FieldDescription>This field is currently disabled.</FieldDescription>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
)
|
||||
}
|
||||
@@ -1,23 +0,0 @@
|
||||
import {
|
||||
NativeSelect,
|
||||
NativeSelectOption,
|
||||
} from "@/examples/radix/ui/native-select"
|
||||
|
||||
export function NativeSelectSizes() {
|
||||
return (
|
||||
<div className="flex flex-col gap-4">
|
||||
<NativeSelect size="sm">
|
||||
<NativeSelectOption value="">Select a fruit</NativeSelectOption>
|
||||
<NativeSelectOption value="apple">Apple</NativeSelectOption>
|
||||
<NativeSelectOption value="banana">Banana</NativeSelectOption>
|
||||
<NativeSelectOption value="blueberry">Blueberry</NativeSelectOption>
|
||||
</NativeSelect>
|
||||
<NativeSelect size="default">
|
||||
<NativeSelectOption value="">Select a fruit</NativeSelectOption>
|
||||
<NativeSelectOption value="apple">Apple</NativeSelectOption>
|
||||
<NativeSelectOption value="banana">Banana</NativeSelectOption>
|
||||
<NativeSelectOption value="blueberry">Blueberry</NativeSelectOption>
|
||||
</NativeSelect>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,21 +0,0 @@
|
||||
import { Field, FieldDescription, FieldLabel } from "@/examples/radix/ui/field"
|
||||
import {
|
||||
NativeSelect,
|
||||
NativeSelectOption,
|
||||
} from "@/examples/radix/ui/native-select"
|
||||
|
||||
export function NativeSelectWithField() {
|
||||
return (
|
||||
<Field>
|
||||
<FieldLabel htmlFor="native-select-country">Country</FieldLabel>
|
||||
<NativeSelect id="native-select-country">
|
||||
<NativeSelectOption value="">Select a country</NativeSelectOption>
|
||||
<NativeSelectOption value="us">United States</NativeSelectOption>
|
||||
<NativeSelectOption value="uk">United Kingdom</NativeSelectOption>
|
||||
<NativeSelectOption value="ca">Canada</NativeSelectOption>
|
||||
<NativeSelectOption value="au">Australia</NativeSelectOption>
|
||||
</NativeSelect>
|
||||
<FieldDescription>Select your country of residence.</FieldDescription>
|
||||
</Field>
|
||||
)
|
||||
}
|
||||
@@ -1,23 +0,0 @@
|
||||
import {
|
||||
NativeSelect,
|
||||
NativeSelectOptGroup,
|
||||
NativeSelectOption,
|
||||
} from "@/examples/radix/ui/native-select"
|
||||
|
||||
export function NativeSelectWithGroups() {
|
||||
return (
|
||||
<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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user