Primitives

Native select

Native select control styled to match the Refined UI control family.

Default model

Composition

The preferred shape for composing the installed primitive from its exported parts.

Root

Single-slot surface with no nested parts.

NativeSelect

The refined source installs this primitive from src/registry/sources/refined/ui/native-select.tsx. Install it on its own with the command above, or inspect the source below.

Registry command

npx shadcn@latest add http://127.0.0.1:3000/r/refined/native-select.json

See registry manifest

Installed dependencies

Installed with this primitive because the slot depends on them; they are support files, not standalone sidebar items.

Control variantssrc/registry/sources/refined/control-variants.tsSupport

Raw code

Primary installed primitive source

Native select slot

src/registry/sources/refined/ui/native-select.tsx

import type { NativeSelectProps } from "@/components/refined-ui/contracts";

import { controlSize, controlSurfaceClasses } from "@/components/refined-ui/control-variants";

import { cn } from "@/components/refined-ui/lib/cn";

import { skinSlot } from "@/components/refined-ui/skin";

// Refined skin slot, NOT Base UI: real native <select> (platform widget, not floating Base UI Select).

// Shares --radius-control/controlSize w/ Button/Input/Select; appearance-none hides OS arrow, chevron overlay matches Select icon.

// Native options open OS menu — no portal/skin re-assert needed.

export function NativeSelect({ size = "md", className, children, ...props }: NativeSelectProps) {

return (

<div className="relative inline-flex w-full items-center">

<select

data-ui="agent"

data-slot="native-select"

data-size={size}

className={cn(

          "w-full min-w-0 cursor-pointer appearance-none rounded-[var(--radius-control)] pr-[calc(var(--padding-x)*1.4)] font-medium outline-none transition focus-visible:ring-2 focus-visible:ring-foreground/20 disabled:cursor-not-allowed disabled:opacity-50 data-[invalid]:ring-2 data-[invalid]:ring-destructive",

controlSurfaceClasses,

controlSize({ size }),

skinSlot("native-select", { size }),

className,

)}

{...props}

>

{children}

</select>

      <span aria-hidden="true" className="pointer-events-none absolute right-[calc(var(--padding-x)*0.6)] text-muted-foreground">

<svg viewBox="0 0 12 12" className="size-3" aria-hidden="true" fill="none">

          <path d="M3 4.5 6 7.5 9 4.5" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" />

</svg>

</span>

</div>

);

}