Inputs / Select

Select

<Select />Stable

A custom-rendered select with rich items, groups, and labels. Built on Radix Select. For OS-native options use Native Select; for searchable lists use Combobox.

import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@/components/upnext";

Explorer

Cross state × items × width × label in one place. Hover any element with inspect mode on to see its tokens.

State

Items

Width

Label

<Select>
  <SelectTrigger><SelectValue placeholder="Choose position" /></SelectTrigger>
  <SelectContent>
    <SelectItem value="qb">Quarterback</SelectItem>
    <SelectItem value="wr">Wide Receiver</SelectItem>
    …
  </SelectContent>
</Select>

Inspector

Edit one prop at a time and see the token chain resolve. The preview re-renders, the code panel updates, and the resolves-to column shows every Tailwind class → CSS variable → final value.

Preview

Code

import { Select } from "@/components/upnext";


<Select />

Source

The wrapper is a thin re-export; the actual styling lives in the shadcn primitive.