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

Select

Select component for the Simpson Strong-Tie design system.

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>`

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

`<SelectTrigger>`

Prop	Type	Default	Description
`size`	`sm` \| `default`	-

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.

Classes

CSS classes used by this component:

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

Accessibility

Ensure proper accessibility attributes are added when implementing this component.

Scroll Area Separator