Primitives

Select

Single-choice picker with a token-matched trigger and floating list.

Default

Disabled

Composition

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

Parts

Exported compound parts from the installed source.

Select

├── SelectTrigger

├── SelectValue

├── SelectContent

└── SelectItem

The refined source installs this primitive from src/registry/sources/refined/ui/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/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

Surface variantssrc/registry/sources/refined/surface-variants.tsSupport

Effect utilitiessrc/registry/sources/refined/effects.cssEffect

Raw code

Primary installed primitive source

Base UI Select slot

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

"use client";

import { Select as SelectPrimitive } from "@base-ui/react/select";

import type { ComponentProps } from "react";

import type {

SelectContentProps,

SelectItemProps,

SelectProps,

SelectTriggerProps,

SelectValueProps,

} from "@/components/refined-ui/contracts";

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

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

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

import { floatingListContentClasses, floatingListItemClasses } from "@/components/refined-ui/surface-variants";

// Trigger shares --radius-control and controlSize scale with Button/Menu trigger — same shape and height.

type RefinedSelectTriggerProps = SelectTriggerProps & Pick<ComponentProps<typeof SelectPrimitive.Trigger>, "nativeButton" | "render">;

export function Select({ children, onValueChange, ...props }: SelectProps) {

return (

    <SelectPrimitive.Root {...props} onValueChange={onValueChange ? (value: string | null) => onValueChange(value ?? "") : undefined}>

{children}

</SelectPrimitive.Root>

);

}

export function SelectTrigger({ size = "sm", className, children, disabled, ...props }: RefinedSelectTriggerProps) {

return (

<SelectPrimitive.Trigger

data-ui="agent"

data-slot="select-trigger"

data-control="true"

data-size={size}

className={cn(

        "group relative isolate inline-flex shrink-0 cursor-pointer items-center justify-between overflow-visible rounded-[var(--radius-control)] font-medium outline-none transition focus-visible:ring-2 focus-visible:ring-foreground/20 disabled:cursor-not-allowed disabled:opacity-45",

controlSurfaceClasses,

controlSize({ size }),

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

className,

)}

disabled={disabled}

{...props}

>

<span

data-ui="agent"

data-slot="control-content"

        className={cn("relative z-[1] inline-flex min-w-0 items-center justify-center gap-[inherit]", skinSlot("control-content", {}))}

>

{children}

</span>

<SelectPrimitive.Icon

data-ui="agent"

data-slot="select-icon"

className={cn(

          "relative z-[1] text-muted-foreground transition-transform duration-[var(--duration-base)] ease-[var(--ease-emphasized)] group-data-[popup-open]:rotate-180",

skinSlot("select-icon", {}),

)}

>

<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>

</SelectPrimitive.Icon>

</SelectPrimitive.Trigger>

);

}

export function SelectValue({ children, ...props }: SelectValueProps) {

return (

<SelectPrimitive.Value className="min-w-0 truncate" {...props}>

{children}

</SelectPrimitive.Value>

);

}

export function SelectContent({ className, children, ...props }: SelectContentProps) {

return (

<SelectPrimitive.Portal>

{/* Portals land outside container-scoped skin root; positioner re-asserts token scope itself. */}

<SelectPrimitive.Positioner

data-skin={skinId()}

data-effects={skinEffects()}

side="bottom"

align="start"

sideOffset={6}

className="z-[80] outline-none"

>

<SelectPrimitive.Popup

data-ui="agent"

data-slot="select-content"

className={cn(

"max-h-[min(20rem,var(--available-height))] min-w-[var(--anchor-width)] overflow-y-auto",

floatingListContentClasses,

skinSlot("select-content", {}),

className,

)}

{...props}

>

{children}

</SelectPrimitive.Popup>

</SelectPrimitive.Positioner>

</SelectPrimitive.Portal>

);

}

export function SelectItem({ className, children, disabled, ...props }: SelectItemProps) {

return (

<SelectPrimitive.Item

data-ui="agent"

data-slot="select-item"

disabled={disabled}

className={cn(floatingListItemClasses, skinSlot("select-item", { disabled: Boolean(disabled) }), className)}

{...props}

>

<SelectPrimitive.ItemText className="flex min-w-0 flex-1 items-center gap-2">{children}</SelectPrimitive.ItemText>

<span className="flex size-3.5 shrink-0 items-center justify-center text-foreground">

<SelectPrimitive.ItemIndicator>

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

            <path d="M2.5 6.5 5 9l4.5-5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />

</svg>

</SelectPrimitive.ItemIndicator>

</span>

</SelectPrimitive.Item>

);

}

Refined UI

Select

Composition

Parts

Installed dependencies

Raw code