NativeSelect

Source: client/lib/theme/vueda-tailwind/controls/index.js

The native <select> styled to match the VUEDA control shell. Used where a JS-driven SelectTrigger or ComboboxTrigger would be overkill: short fixed enums on touch devices, environments where native menu UX is preferred. Same control-height + hairline + focus + aria-invalid shell as Input.root, but because it is a picker (click to open) rather than a text field it also carries the trigger-hover affordance the other pickers use: hairline-border-strong on the edge in both modes plus a dark-mode --accent fill step. appearance-none strips the native chevron and pr-9 reserves space for the icon the consumer paints. The option surface inside the dropdown is owned by the OS; deep styling lives in the JS-driven pickers.

Vue component: NativeSelect

Slot	Default classes	Description
root	5 classes	The native <select> styled to match the VUEDA control shell. Used where a JS-driven SelectTrigger or ComboboxTrigger would be overkill: short fixed enums on touch devices, environments where native menu UX is preferred. Same control-height + hairline + focus + aria-invalid shell as Input.root, but because it is a picker (click to open) rather than a text field it also carries the trigger-hover affordance the other pickers use: hairline-border-strong on the edge in both modes plus a dark-mode --accent fill step. appearance-none strips the native chevron and pr-9 reserves space for the icon the consumer paints. The option surface inside the dropdown is owned by the OS; deep styling lives in the JS-driven pickers.

root

The native <select> styled to match the VUEDA control shell. Used where a JS-driven SelectTrigger or ComboboxTrigger would be overkill: short fixed enums on touch devices, environments where native menu UX is preferred. Same control-height + hairline + focus + aria-invalid shell as Input.root, but because it is a picker (click to open) rather than a text field it also carries the trigger-hover affordance the other pickers use: hairline-border-strong on the edge in both modes plus a dark-mode --accent fill step. appearance-none strips the native chevron and pr-9 reserves space for the icon the consumer paints. The option surface inside the dropdown is owned by the OS; deep styling lives in the JS-driven pickers.

Default classes:

placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-accent dark:active:bg-accent-active hover:hairline-border-strong
hairline h-vueda-control w-full min-w-0 appearance-none rounded-vueda-field bg-transparent px-vueda-control-px pr-9 text-sm shadow-vueda-control transition-shadow
disabled:pointer-events-none disabled:cursor-not-allowed
focus-visible:hairline-ring focus-visible:focus-ring-shadow
aria-invalid:hairline-destructive aria-invalid:focus-visible:focus-ring-shadow-destructive

Source: client/lib/theme/vueda-tailwind/controls/NativeSelect.theme.js:18