# Native Select A styled native HTML select element with consistent design system integration. ```svelte Select status Todo In Progress Done Cancelled ``` ## Installation ```bash pnpm dlx shadcn-svelte@latest add native-select ``` ```bash npx shadcn-svelte@latest add native-select ``` ```bash bun x shadcn-svelte@latest add native-select ``` ## Usage ```svelte Select a fruit Apple Banana Blueberry Grapes Pineapple ``` ## Examples ### With Groups Organize options using `NativeSelect.OptGroup` for better categorization. ```svelte Select department Frontend Backend DevOps Sales Rep Account Manager Sales Director Customer Support Product Manager Operations Manager ``` ```svelte Select a food Apple Banana Blueberry Carrot Broccoli Spinach ``` ### Disabled State Disable individual options or the entire select component. ```svelte Select priority Low Medium High Critical ``` ### Invalid State Show validation errors with the `aria-invalid` attribute and error styling. ```svelte Select role Admin Editor Viewer Guest ``` ```svelte Select a country United States United Kingdom Canada ``` ## 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 English Spanish French ``` ## API Reference ### NativeSelect.Root The main select component that wraps the native HTML select element. | Prop | Type | Default | | ----------------------------------- | ------------------------------------ | ------------------------------------------ | | `class` | `string` | | All other props are passed through to the underlying `