Select

Guidelines#

Use it for 5–15 known options. Fewer with descriptions: RadioGroup. Long or searchable lists: TypedOptionPicker or Command.

What you provide: value/onValueChange or defaultValue; a SelectTrigger (set its width) with SelectValue and a placeholder; SelectContent with SelectItems (SelectGroup + SelectLabel to group, SelectSeparator between groups). Label the trigger with a Label.

The list sits over the trigger (position="item-aligned"); pass position="popper" to drop it below instead. Items are 14px, accent on focus, a check on the chosen one.

Facts#

API#

TypeScript declarations emitted from src/components/ui/select.tsx (the module also exports its other parts).

declare function Select({ ...props }: React.ComponentProps<typeof SelectPrimitive.Root>): any;
declare function SelectGroup({ ...props }: React.ComponentProps<typeof SelectPrimitive.Group>): any;
declare function SelectValue({ ...props }: React.ComponentProps<typeof SelectPrimitive.Value>): any;
declare function SelectTrigger({ className, size, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
    size?: "sm" | "default";
}): any;
declare function SelectContent({ className, children, position, align, ...props }: React.ComponentProps<typeof SelectPrimitive.Content>): any;
declare function SelectLabel({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Label>): any;
declare function SelectItem({ className, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Item>): any;
declare function SelectSeparator({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.Separator>): any;
declare function SelectScrollUpButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>): any;
declare function SelectScrollDownButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>): any;
export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, };

Example#

The code of the preview above: plain React.createElement against window.DigitalCrew, with realistic data.

<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
function Items() {
  return [
    h(DC.SelectItem, { key: 1, value: "draft" }, "Draft"),
    h(DC.SelectItem, { key: 2, value: "active" }, "Active"),
    h(DC.SelectItem, { key: 3, value: "paused" }, "Paused"),
    h(DC.SelectItem, { key: 4, value: "completed" }, "Completed")];
}
function App() {
  return h("div", { className: "flex items-start gap-8" },
    h("div", { className: "flex flex-col gap-2" },
      h(DC.Label, null, "Status"),
      h(DC.Select, { defaultValue: "active", defaultOpen: true },
        h(DC.SelectTrigger, { className: "w-48" }, h(DC.SelectValue, null)),
        h(DC.SelectContent, null, Items()))),
    h("div", { className: "flex flex-col gap-2" },
      h(DC.Label, null, "Rows per page (sm)"),
      h(DC.Select, { defaultValue: "20" },
        h(DC.SelectTrigger, { size: "sm", className: "w-24" }, h(DC.SelectValue, null)),
        h(DC.SelectContent, null, ["10", "20", "50"].map(function (v) { return h(DC.SelectItem, { key: v, value: v }, v); })))));
}
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>

More in Forms#