Shadcn Select

A select component that allows users to choose a single option from a dropdown menu, perfect for forms, settings, and data selection.

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

export function SelectDemo() {
  return (
    <Select>
      <SelectTrigger className="w-72">
        <SelectValue placeholder="Select Version" />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="react">Creative Tim UI React</SelectItem>
        <SelectItem value="html">Creative Tim UI HTML</SelectItem>
        <SelectItem value="vue">Creative Tim UI Vue</SelectItem>
        <SelectItem value="svelte">Creative Tim UI Svelte</SelectItem>
      </SelectContent>
    </Select>
  )
}

Installation


pnpm dlx @creative-tim/ui@latest add select

Usage

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

<Select>
  <SelectTrigger>
    <SelectValue placeholder="Select an option" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="option1">Option 1</SelectItem>
    <SelectItem value="option2">Option 2</SelectItem>
  </SelectContent>
</Select>

Examples

Select Colors

Select components with different color schemes (primary, secondary, info, success, warning, error) to visually distinguish between different select states and provide visual variety.

import { cn } from "@/lib/utils"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"

export function SelectColors() {
  return (
    <div className="flex w-72 flex-col items-center gap-4">
      <Select>
        <SelectTrigger
          className={cn(
            "border-primary/50 focus-visible:border-primary focus-visible:ring-primary/50 w-72"
          )}
        >
          <SelectValue placeholder="Color. e.g. primary" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="primary">Color Primary</SelectItem>
          <SelectItem value="secondary">Color Secondary</SelectItem>
          <SelectItem value="info">Color Info</SelectItem>
          <SelectItem value="success">Color Success</SelectItem>
          <SelectItem value="warning">Color Warning</SelectItem>
          <SelectItem value="error">Color Error</SelectItem>
        </SelectContent>
      </Select>
      <Select>
        <SelectTrigger
          className={cn(
            "border-secondary/50 focus-visible:border-secondary focus-visible:ring-secondary/50 w-72"
          )}
        >
          <SelectValue placeholder="Color. e.g. secondary" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="primary">Color Primary</SelectItem>
          <SelectItem value="secondary">Color Secondary</SelectItem>
          <SelectItem value="info">Color Info</SelectItem>
          <SelectItem value="success">Color Success</SelectItem>
          <SelectItem value="warning">Color Warning</SelectItem>
          <SelectItem value="error">Color Error</SelectItem>
        </SelectContent>
      </Select>
      <Select>
        <SelectTrigger
          className={cn(
            "w-72 border-blue-500/50 focus-visible:border-blue-500 focus-visible:ring-blue-500/50"
          )}
        >
          <SelectValue placeholder="Color. e.g. info" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="primary">Color Primary</SelectItem>
          <SelectItem value="secondary">Color Secondary</SelectItem>
          <SelectItem value="info">Color Info</SelectItem>
          <SelectItem value="success">Color Success</SelectItem>
          <SelectItem value="warning">Color Warning</SelectItem>
          <SelectItem value="error">Color Error</SelectItem>
        </SelectContent>
      </Select>
      <Select>
        <SelectTrigger
          className={cn(
            "w-72 border-green-500/50 focus-visible:border-green-500 focus-visible:ring-green-500/50"
          )}
        >
          <SelectValue placeholder="Color. e.g. success" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="primary">Color Primary</SelectItem>
          <SelectItem value="secondary">Color Secondary</SelectItem>
          <SelectItem value="info">Color Info</SelectItem>
          <SelectItem value="success">Color Success</SelectItem>
          <SelectItem value="warning">Color Warning</SelectItem>
          <SelectItem value="error">Color Error</SelectItem>
        </SelectContent>
      </Select>
      <Select>
        <SelectTrigger
          className={cn(
            "w-72 border-yellow-500/50 focus-visible:border-yellow-500 focus-visible:ring-yellow-500/50"
          )}
        >
          <SelectValue placeholder="Color. e.g. warning" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="primary">Color Primary</SelectItem>
          <SelectItem value="secondary">Color Secondary</SelectItem>
          <SelectItem value="info">Color Info</SelectItem>
          <SelectItem value="success">Color Success</SelectItem>
          <SelectItem value="warning">Color Warning</SelectItem>
          <SelectItem value="error">Color Error</SelectItem>
        </SelectContent>
      </Select>
      <Select>
        <SelectTrigger
          className={cn(
            "border-destructive/50 focus-visible:border-destructive focus-visible:ring-destructive/50 w-72"
          )}
        >
          <SelectValue placeholder="Color. e.g. error" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="primary">Color Primary</SelectItem>
          <SelectItem value="secondary">Color Secondary</SelectItem>
          <SelectItem value="info">Color Info</SelectItem>
          <SelectItem value="success">Color Success</SelectItem>
          <SelectItem value="warning">Color Warning</SelectItem>
          <SelectItem value="error">Color Error</SelectItem>
        </SelectContent>
      </Select>
    </div>
  )
}

Select Sizes

Select components in different sizes (small, medium, large) to accommodate various design needs and improve visual hierarchy.

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

export function SelectSizes() {
  return (
    <div className="flex w-72 flex-col items-center gap-4">
      <Select>
        <SelectTrigger size="sm" className="w-72">
          <SelectValue placeholder="Size. e.g. small" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="small">Size Small</SelectItem>
          <SelectItem value="medium">Size Medium</SelectItem>
          <SelectItem value="large">Size Large</SelectItem>
        </SelectContent>
      </Select>
      <Select>
        <SelectTrigger className="w-72">
          <SelectValue placeholder="Size. e.g. medium" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="small">Size Small</SelectItem>
          <SelectItem value="medium">Size Medium</SelectItem>
          <SelectItem value="large">Size Large</SelectItem>
        </SelectContent>
      </Select>
      <Select>
        <SelectTrigger className="h-10 w-72">
          <SelectValue placeholder="Size. e.g. large" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="small">Size Small</SelectItem>
          <SelectItem value="medium">Size Medium</SelectItem>
          <SelectItem value="large">Size Large</SelectItem>
        </SelectContent>
      </Select>
    </div>
  )
}

Disabled Select

A disabled select that cannot be interacted with, useful for displaying read-only options or temporarily restricting user selection.

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

export function SelectDisabled() {
  return (
    <Select disabled>
      <SelectTrigger className="w-72">
        <SelectValue placeholder="Select Version" />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="react">Creative Tim UI React</SelectItem>
        <SelectItem value="html">Creative Tim UI HTML</SelectItem>
        <SelectItem value="vue">Creative Tim UI Vue</SelectItem>
        <SelectItem value="svelte">Creative Tim UI Svelte</SelectItem>
      </SelectContent>
    </Select>
  )
}

Select Controlled

A controlled select component with external state management, demonstrating how to manage select value from outside the component.

"use client"

import * as React from "react"

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

export function SelectControlled() {
  const [value, setValue] = React.useState<string>()

  return (
    <Select value={value} onValueChange={setValue}>
      <SelectTrigger className="w-72">
        <SelectValue placeholder="Select Version" />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="react">Creative Tim UI React</SelectItem>
        <SelectItem value="html">Creative Tim UI HTML</SelectItem>
        <SelectItem value="vue">Creative Tim UI Vue</SelectItem>
        <SelectItem value="svelte">Creative Tim UI Svelte</SelectItem>
      </SelectContent>
    </Select>
  )
}

Select Countries

A select component with a scrollable list of countries, demonstrating how to handle long lists of options with custom content.

"use client"

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

const countries = [
  { name: "United States", flag: "🇺🇸" },
  { name: "United Kingdom", flag: "🇬🇧" },
  { name: "Canada", flag: "🇨🇦" },
  { name: "Germany", flag: "🇩🇪" },
  { name: "France", flag: "🇫🇷" },
  { name: "Italy", flag: "🇮🇹" },
  { name: "Spain", flag: "🇪🇸" },
  { name: "Australia", flag: "🇦🇺" },
  { name: "Japan", flag: "🇯🇵" },
  { name: "China", flag: "🇨🇳" },
  { name: "India", flag: "🇮🇳" },
  { name: "Brazil", flag: "🇧🇷" },
  { name: "Mexico", flag: "🇲🇽" },
  { name: "Russia", flag: "🇷🇺" },
  { name: "South Korea", flag: "🇰🇷" },
]

export function SelectCountries() {
  return (
    <div className="w-72">
      <Select>
        <SelectTrigger>
          <SelectValue placeholder="Select Country" />
        </SelectTrigger>
        <SelectContent className="h-72 w-72">
          {countries.map((country) => (
            <SelectItem key={country.name} value={country.name}>
              <div className="flex items-start gap-2 text-start">
                <span className="text-base">{country.flag}</span>
                <span className="text-sm">{country.name}</span>
              </div>
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
    </div>
  )
}

Select with Validation

A select component with validation states (error and success) that provides visual feedback to users about the validity of their selection.

Something went wrong!

Congratulations 🎉

import { cn } from "@/lib/utils"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"

export function SelectWithValidation() {
  return (
    <div className="flex w-72 flex-col items-center gap-4">
      <div className="w-full">
        <Select>
          <SelectTrigger
            aria-invalid="true"
            className={cn(
              "border-destructive/50 focus-visible:border-destructive focus-visible:ring-destructive/50 w-full"
            )}
          >
            <SelectValue placeholder="Select Version" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="react">Creative Tim UI React</SelectItem>
            <SelectItem value="html">Creative Tim UI HTML</SelectItem>
            <SelectItem value="vue">Creative Tim UI Vue</SelectItem>
            <SelectItem value="svelte">Creative Tim UI Svelte</SelectItem>
          </SelectContent>
        </Select>
        <p className="text-destructive mt-1 block text-sm">
          Something went wrong!
        </p>
      </div>
      <div className="w-full">
        <Select>
          <SelectTrigger
            className={cn(
              "w-full border-green-500/50 focus-visible:border-green-500 focus-visible:ring-green-500/50"
            )}
          >
            <SelectValue placeholder="Select Version" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="react">Creative Tim UI React</SelectItem>
            <SelectItem value="html">Creative Tim UI HTML</SelectItem>
            <SelectItem value="vue">Creative Tim UI Vue</SelectItem>
            <SelectItem value="svelte">Creative Tim UI Svelte</SelectItem>
          </SelectContent>
        </Select>
        <p className="mt-1 block text-sm text-green-500">Congratulations 🎉</p>
      </div>
    </div>
  )
}

Props

The select component is built using Radix UI's Select primitive and accepts the following props:

Select (Root Component)

Prop	Type	Default	Description
`value`	`string`	-	The controlled value of the selected item
`defaultValue`	`string`	-	The value of the item to select by default (uncontrolled)
`onValueChange`	`(value: string) => void`	-	Event handler called when the selected value changes
`disabled`	`boolean`	`false`	When true, prevents the user from interacting with the select
`required`	`boolean`	`false`	When true, indicates that a selection is required
`name`	`string`	-	The name of the select when used in a form
`open`	`boolean`	-	The controlled open state of the select
`onOpenChange`	`(open: boolean) => void`	-	Event handler called when the open state changes

SelectTrigger

Prop	Type	Default	Description
`size`	`"sm" \| "default"`	`"default"`	The size of the trigger button
`className`	`string`	-	Additional CSS classes to apply to the trigger
`children`	`ReactNode`	-	The content to display in the trigger (usually SelectValue)

SelectValue

Prop	Type	Default	Description
`placeholder`	`string`	-	Placeholder text displayed when no value is selected
`className`	`string`	-	Additional CSS classes to apply

SelectContent

Prop	Type	Default	Description
`position`	`"popper" \| "item-aligned"`	`"popper"`	The positioning strategy for the content
`className`	`string`	-	Additional CSS classes to apply to the content container
`children`	`ReactNode`	-	The content to display when the select is open

SelectItem

Prop	Type	Default	Description
`value`	`string`	-	A unique value for the item (required)
`disabled`	`boolean`	`false`	When true, prevents the user from selecting the item
`className`	`string`	-	Additional CSS classes to apply to the item
`children`	`ReactNode`	-	The content to display in the item

Accessibility

The select component follows accessibility best practices:

Uses proper ARIA attributes for screen readers
Supports keyboard navigation (Arrow keys to navigate, Enter/Space to select, Escape to close)
Focus states are clearly visible for keyboard users
Disabled state is properly communicated to assistive technologies
Maintains proper semantic HTML structure
Works with form labels for better accessibility
Supports aria-invalid for validation feedback

Best Practices

Use selects for choosing from a list of predefined options
Provide clear placeholder text that describes what to select
Use appropriate sizes based on the importance and context of the field
Consider using controlled state when you need to manage the value externally
Use validation states to provide immediate feedback to users
Ensure sufficient contrast between text and background colors
Test keyboard navigation and screen reader compatibility
Group related options together for better organization
Use descriptive option labels that clearly communicate their purpose
Consider using custom content in SelectItem for complex options (like countries with flags)

The select component provides a clean and accessible way to create dropdown selection controls. It's ideal for forms, settings panels, data selection, and any interface where users need to choose one option from multiple alternatives.

Rating Sidebar

On This Page

Installation Usage Examples Select Colors Select Sizes Disabled Select Select Controlled Select Countries Select with Validation Props Select (Root Component)SelectTrigger SelectValue SelectContent SelectItem Accessibility Best Practices

Integrate the blocks in your application or use them in v0, Lovable, Claude, etc.

Speed up your workflow with modular, open-source components and blocksthat integrate effortlessly through Registries and MCPs.