Select

Component preview

The live preview for UI components is handled by components/atoms/codedocs/ComponentPreview.tsx. Use it directly inside MDX whenever you want a playground-style embed. Provide componentProps to set default values and propOptions to surface toggle-able props next to the preview.

Preview

Current selection: pro

Prop reference

Auto-generated from the component source

Select

All props are forwarded to the underlying primitive.

React.ComponentProps<typeof SelectPrimitive.Root>

SelectContent

className
children
position = "item-aligned"
align = "center"

React.ComponentProps<typeof SelectPrimitive.Content>

SelectGroup

All props are forwarded to the underlying primitive.

React.ComponentProps<typeof SelectPrimitive.Group>

SelectItem

className
children

React.ComponentProps<typeof SelectPrimitive.Item>

SelectLabel

className

React.ComponentProps<typeof SelectPrimitive.Label>

SelectScrollDownButton

className

React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>

SelectScrollUpButton

className

React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>

SelectSeparator

className

React.ComponentProps<typeof SelectPrimitive.Separator>

SelectTrigger

className
size = "default"
children

React.ComponentProps<typeof SelectPrimitive.Trigger> & { size?: "sm" | "default"; }

SelectValue

All props are forwarded to the underlying primitive.

React.ComponentProps<typeof SelectPrimitive.Value>

Code

// owner: Sona
"use client";

import * as React from "react";

import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectSeparator,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

const plans = [
  { value: "free", label: "Free - 3 workflows" },
  { value: "pro", label: "Pro - Unlimited" },
  { value: "enterprise", label: "Enterprise" },
];

export default function SelectExample() {
  const [value, setValue] = React.useState("pro");

  return (
    <div className="flex flex-col gap-4">
      <Select value={value} onValueChange={setValue}>
        <SelectTrigger className="w-[220px]">
          <SelectValue placeholder="Select a plan" />
        </SelectTrigger>
        <SelectContent>
          <SelectGroup>
            <SelectLabel>Plans</SelectLabel>
            {plans.map((plan) => (
              <SelectItem key={plan.value} value={plan.value}>
                {plan.label}
              </SelectItem>
            ))}
          </SelectGroup>
          <SelectSeparator />
          <SelectGroup>
            <SelectLabel>Legacy</SelectLabel>
            <SelectItem value="legacy">Legacy plan</SelectItem>
          </SelectGroup>
        </SelectContent>
      </Select>
      <p className="text-sm text-muted-foreground">
        Current selection: {value}
      </p>
    </div>
  );
}

Select

Component preview

On this page

Command Palette