🚧 This documentation is a work in progress. Coming from @studs/react? See our Migration Guide.

Select

A dropdown control that allows users to choose one option from a list.

Select provides a space-efficient way to present multiple options without cluttering the interface. When closed, it displays only the selected value; when opened, it reveals a dropdown list of all available options. Selects are ideal for forms and settings where users need to choose from a predefined set of options.

Built on top of Radix UI's Select primitive with full keyboard navigation, type-ahead search, focus management, and accessibility support including proper ARIA attributes.

Example

"use client"

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@strongtie/design-system/select"

export function SelectDefault() {
  return (
    <Select>
      <SelectTrigger className="w-[180px]">
        <SelectValue placeholder="Select a fruit" />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="apple">Apple</SelectItem>
        <SelectItem value="banana">Banana</SelectItem>
        <SelectItem value="blueberry">Blueberry</SelectItem>
        <SelectItem value="grapes">Grapes</SelectItem>
        <SelectItem value="pineapple">Pineapple</SelectItem>
      </SelectContent>
    </Select>
  )
}

Installation


npm install @strongtie/design-system

import { Select } from "@strongtie/design-system/select"

Components

This module exports the following components:

Select
SelectContent
SelectGroup
SelectItem
SelectLabel
SelectScrollDownButton
SelectScrollUpButton
SelectSeparator
SelectTrigger
SelectValue

Props

`<Select>`

This component accepts the following custom props. For additional props inherited from Radix UI primitives see the Radix UI documentation.

Prop	Type	Default
`defaultValue`	`string`	-
`onValueChange`	`((value: string) => void)`	-
`value`	`string`	-

Examples

"use client"

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@strongtie/design-system/select"

export function SelectDefault() {
  return (
    <Select>
      <SelectTrigger className="w-[180px]">
        <SelectValue placeholder="Select a fruit" />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="apple">Apple</SelectItem>
        <SelectItem value="banana">Banana</SelectItem>
        <SelectItem value="blueberry">Blueberry</SelectItem>
        <SelectItem value="grapes">Grapes</SelectItem>
        <SelectItem value="pineapple">Pineapple</SelectItem>
      </SelectContent>
    </Select>
  )
}

Controlled

Controlled Select

Selected value: apple

"use client"

import * as React from "react"
import { Label } from "@strongtie/design-system/label"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@strongtie/design-system/select"

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

  return (
    <div className="space-y-4">
      <div className="flex flex-col gap-2">
        <Label htmlFor="controlled-select">Controlled Select</Label>
        <Select value={value} onValueChange={setValue}>
          <SelectTrigger id="controlled-select" className="w-[180px]">
            <SelectValue placeholder="Select a fruit" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="apple">Apple</SelectItem>
            <SelectItem value="banana">Banana</SelectItem>
            <SelectItem value="orange">Orange</SelectItem>
            <SelectItem value="mango">Mango</SelectItem>
            <SelectItem value="grape">Grape</SelectItem>
          </SelectContent>
        </Select>
      </div>
      <p className="text-muted-foreground text-sm">
        Selected value: <strong>{value}</strong>
      </p>
    </div>
  )
}

Custom Placeholder

Select Framework

"use client"

import { Label } from "@strongtie/design-system/label"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@strongtie/design-system/select"

export function SelectCustomPlaceholder() {
  return (
    <div className="flex flex-col gap-2">
      <Label htmlFor="custom-placeholder-select">Select Framework</Label>
      <Select>
        <SelectTrigger id="custom-placeholder-select" className="w-[250px]">
          <SelectValue placeholder="🚀 Choose your favorite framework..." />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="react">React</SelectItem>
          <SelectItem value="vue">Vue</SelectItem>
          <SelectItem value="angular">Angular</SelectItem>
          <SelectItem value="svelte">Svelte</SelectItem>
          <SelectItem value="solid">Solid</SelectItem>
        </SelectContent>
      </Select>
    </div>
  )
}

Disabled

Disabled Select

"use client"

import { Label } from "@strongtie/design-system/label"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@strongtie/design-system/select"

export function SelectDisabled() {
  return (
    <div className="flex flex-col gap-2">
      <Label htmlFor="disabled-select">Disabled Select</Label>
      <Select disabled>
        <SelectTrigger id="disabled-select" className="w-[180px]">
          <SelectValue placeholder="Cannot select" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="option1">Option 1</SelectItem>
          <SelectItem value="option2">Option 2</SelectItem>
          <SelectItem value="option3">Option 3</SelectItem>
        </SelectContent>
      </Select>
    </div>
  )
}

Form Integration

"use client"

import * as React from "react"
import { Button } from "@strongtie/design-system/button"
import { Label } from "@strongtie/design-system/label"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@strongtie/design-system/select"

export function SelectFormIntegration() {
  const [submitted, setSubmitted] = React.useState<{
    category: string
    priority: string
  } | null>(null)

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    const formData = new FormData(e.currentTarget)
    const category = formData.get("category") as string
    const priority = formData.get("priority") as string
    setSubmitted({ category, priority })
  }

  return (
    <div className="space-y-4">
      <form onSubmit={handleSubmit} className="space-y-6">
        <div className="space-y-4">
          <div className="flex flex-col gap-2">
            <Label htmlFor="category-select">Category</Label>
            <Select name="category" defaultValue="bug" required>
              <SelectTrigger id="category-select" className="w-[200px]">
                <SelectValue placeholder="Select category" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="bug">Bug Report</SelectItem>
                <SelectItem value="feature">Feature Request</SelectItem>
                <SelectItem value="improvement">Improvement</SelectItem>
                <SelectItem value="question">Question</SelectItem>
              </SelectContent>
            </Select>
          </div>

          <div className="flex flex-col gap-2">
            <Label htmlFor="priority-select">Priority</Label>
            <Select name="priority" defaultValue="medium" required>
              <SelectTrigger id="priority-select" className="w-[200px]">
                <SelectValue placeholder="Select priority" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="low">Low</SelectItem>
                <SelectItem value="medium">Medium</SelectItem>
                <SelectItem value="high">High</SelectItem>
                <SelectItem value="critical">Critical</SelectItem>
              </SelectContent>
            </Select>
          </div>
        </div>

        <Button type="submit">Submit Form</Button>
      </form>

      {submitted && (
        <div className="rounded-md border p-4">
          <p className="text-sm font-medium">Form submitted:</p>
          <div className="text-muted-foreground mt-2 space-y-1 text-sm">
            <p>
              Category: <strong>{submitted.category}</strong>
            </p>
            <p>
              Priority: <strong>{submitted.priority}</strong>
            </p>
          </div>
        </div>
      )}
    </div>
  )
}

Scrollable List

Select Country

"use client"

import { Label } from "@strongtie/design-system/label"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@strongtie/design-system/select"

const countries = [
  "United States",
  "Canada",
  "Mexico",
  "Brazil",
  "Argentina",
  "United Kingdom",
  "France",
  "Germany",
  "Italy",
  "Spain",
  "Japan",
  "China",
  "India",
  "Australia",
  "New Zealand",
  "South Africa",
  "Egypt",
  "Kenya",
  "Nigeria",
  "Russia",
  "Turkey",
  "Saudi Arabia",
  "South Korea",
  "Thailand",
  "Vietnam",
]

export function SelectScrollableList() {
  return (
    <div className="flex flex-col gap-2">
      <Label htmlFor="scrollable-select">Select Country</Label>
      <Select>
        <SelectTrigger id="scrollable-select" className="w-[280px]">
          <SelectValue placeholder="Select a country" />
        </SelectTrigger>
        <SelectContent className="max-h-[300px]">
          {countries.map((country) => (
            <SelectItem
              key={country}
              value={country.toLowerCase().replace(/\s+/g, "-")}
            >
              {country}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
    </div>
  )
}

Small Trigger

Small Select

"use client"

import { Label } from "@strongtie/design-system/label"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@strongtie/design-system/select"

export function SelectSmallTrigger() {
  return (
    <div className="flex flex-col gap-2">
      <Label htmlFor="small-select">Small Select</Label>
      <Select>
        <SelectTrigger id="small-select" className="h-8 w-[150px] text-xs">
          <SelectValue placeholder="Select size" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="xs">Extra Small</SelectItem>
          <SelectItem value="sm">Small</SelectItem>
          <SelectItem value="md">Medium</SelectItem>
          <SelectItem value="lg">Large</SelectItem>
          <SelectItem value="xl">Extra Large</SelectItem>
        </SelectContent>
      </Select>
    </div>
  )
}

With Groups

"use client"

import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from "@strongtie/design-system/select"

export function SelectWithGroups() {
  return (
    <Select>
      <SelectTrigger className="w-[280px]">
        <SelectValue placeholder="Select a fruit or vegetable" />
      </SelectTrigger>
      <SelectContent>
        <SelectGroup>
          <SelectLabel>Fruits</SelectLabel>
          <SelectItem value="apple">Apple</SelectItem>
          <SelectItem value="banana">Banana</SelectItem>
          <SelectItem value="orange">Orange</SelectItem>
          <SelectItem value="mango">Mango</SelectItem>
        </SelectGroup>
        <SelectGroup>
          <SelectLabel>Vegetables</SelectLabel>
          <SelectItem value="carrot">Carrot</SelectItem>
          <SelectItem value="broccoli">Broccoli</SelectItem>
          <SelectItem value="spinach">Spinach</SelectItem>
          <SelectItem value="tomato">Tomato</SelectItem>
        </SelectGroup>
        <SelectGroup>
          <SelectLabel>Grains</SelectLabel>
          <SelectItem value="rice">Rice</SelectItem>
          <SelectItem value="wheat">Wheat</SelectItem>
          <SelectItem value="oats">Oats</SelectItem>
        </SelectGroup>
      </SelectContent>
    </Select>
  )
}

Styling

Components can be styled using the className prop. The design system uses Tailwind CSS for styling.

Component Slots

The following data attributes are used to identify component parts:

select
select-content
select-group
select-item
select-label
select-scroll-down-button
select-scroll-up-button
select-separator
select-trigger
select-value

Additional Classes

Other CSS classes used by this component:

menu-item
menu-item-indicator
menu-item-label
menu-item-separator
popper
select-content
select-content-popper
select-icon
select-scroll-button
select-trigger
select-viewport
select-viewport-popper

Accessibility

This component inherits accessibility features from Radix UI, including:

Keyboard navigation support
ARIA attributes
Focus management
Screen reader compatibility

Resources

Radix UI select Documentation

Scroll Area Separator