Select

Source: packages/shared/components/ui/select.tsx Primitives: @radix-ui/react-select

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

Preview

Sub-components

Component	Description
`Select`	Root — manages open/close state and value
`SelectTrigger`	The clickable button that opens the dropdown
`SelectValue`	Displays the current selection (or placeholder)
`SelectContent`	The dropdown panel (portaled)
`SelectItem`	An individual option
`SelectGroup`	Groups related items
`SelectLabel`	Label for a group
`SelectSeparator`	Divider line between groups

SelectTrigger Sizes

Size	Height
`default`	`h-10` (40px)
`sm`	`h-8` (32px)

Usage Examples

Basic

<Select value={value} onValueChange={setValue}>
  <SelectTrigger>
    <SelectValue placeholder="Select an option" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="one">Option One</SelectItem>
    <SelectItem value="two">Option Two</SelectItem>
  </SelectContent>
</Select>

Admin — JobForm (Employment Type)

<Select
  value={formData.employment_type}
  onValueChange={(value) => updateField("employment_type", value)}
>
  <SelectTrigger id="employment_type" className="bg-white">
    <SelectValue placeholder="Select employment type" />
  </SelectTrigger>
  <SelectContent>
    {EMPLOYMENT_TYPES.map((type) => (
      <SelectItem key={type.value} value={type.value}>
        {type.label}
      </SelectItem>
    ))}
  </SelectContent>
</Select>

Landing — ContactPage (Location)

<Select value={formData.location} onValueChange={handleLocationChange}>
  <SelectTrigger>
    <SelectValue placeholder="Select a location" />
  </SelectTrigger>
  <SelectContent>
    {locations.map((location) => (
      <SelectItem key={location} value={location}>
        {location}
      </SelectItem>
    ))}
  </SelectContent>
</Select>

Used In

Admin: JobForm (employment type)
Landing: ContactPage (location)

Notes

Override in Admin JobForm: SelectTrigger className="bg-white" replaces the default background to match the white-background admin form style.
Landing ContactPage uses the component with default styling (no className overrides).