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

Multi Select

Multi Select component for the Simpson Strong-Tie design system.

Example

"use client"

import { useState } from "react"
import {
  MultiSelect,
  MultiSelectContent,
  MultiSelectItem,
  MultiSelectTrigger,
} from "@strongtie/design-system/multi-select"

const frameworks = [
  { value: "react", label: "React" },
  { value: "vue", label: "Vue" },
  { value: "angular", label: "Angular" },
  { value: "svelte", label: "Svelte" },
  { value: "nextjs", label: "Next.js" },
  { value: "nuxt", label: "Nuxt" },
  { value: "remix", label: "Remix" },
  { value: "astro", label: "Astro" },
]

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

  return (
    <div className="w-[300px]">
      <MultiSelect value={value} onValueChange={setValue} items={frameworks}>
        <MultiSelectTrigger placeholder="Select frameworks..." />
        <MultiSelectContent>
          {frameworks.map((framework) => (
            <MultiSelectItem
              key={framework.value}
              value={framework.value}
              label={framework.label}
            />
          ))}
        </MultiSelectContent>
      </MultiSelect>
    </div>
  )
}

Installation


npm install @strongtie/design-system

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

Components

This module exports the following components:

MultiSelectRoot
MultiSelectTrigger
MultiSelectContent
MultiSelectItem
MultiSelectSeparator
MultiSelectGroup
MultiSelectLabel
MultiSelectClearButton
useMultiSelect

Props

`<MultiSelectRoot>`

Prop	Type	Default
`onValueChange` *	`(value: string[]) => void`	-
`value` *	`string[]`	-
`disabled`	`boolean`	`false`
`items`	`MultiSelectItemType[]`	-
`maxItems`	`number`	-

`<MultiSelectTrigger>`

Prop	Type	Default	Description
`placeholder`	`string`	-

`<MultiSelectItem>`

Prop	Type	Default	Description
`label`	`string`	-

Examples

"use client"

import { useState } from "react"
import {
  MultiSelect,
  MultiSelectContent,
  MultiSelectItem,
  MultiSelectTrigger,
} from "@strongtie/design-system/multi-select"

const frameworks = [
  { value: "react", label: "React" },
  { value: "vue", label: "Vue" },
  { value: "angular", label: "Angular" },
  { value: "svelte", label: "Svelte" },
  { value: "nextjs", label: "Next.js" },
  { value: "nuxt", label: "Nuxt" },
  { value: "remix", label: "Remix" },
  { value: "astro", label: "Astro" },
]

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

  return (
    <div className="w-[300px]">
      <MultiSelect value={value} onValueChange={setValue} items={frameworks}>
        <MultiSelectTrigger placeholder="Select frameworks..." />
        <MultiSelectContent>
          {frameworks.map((framework) => (
            <MultiSelectItem
              key={framework.value}
              value={framework.value}
              label={framework.label}
            />
          ))}
        </MultiSelectContent>
      </MultiSelect>
    </div>
  )
}

Custom

Component multi-select-custom not found in registry.

With Icons

"use client"

import * as React from "react"
import {
  MultiSelect,
  MultiSelectContent,
  MultiSelectItem,
  MultiSelectTrigger,
} from "@strongtie/design-system/multi-select"

const options = [
  { value: "home", label: "Home" },
  { value: "settings", label: "Settings" },
  { value: "profile", label: "Profile" },
  { value: "notifications", label: "Notifications" },
]

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

  return (
    <div className="w-[300px]">
      <MultiSelect value={value} onValueChange={setValue} items={options}>
        <MultiSelectTrigger placeholder="Select options..." />
        <MultiSelectContent>
          {options.map((option) => (
            <MultiSelectItem
              key={option.value}
              value={option.value}
              label={option.label}
            />
          ))}
        </MultiSelectContent>
      </MultiSelect>
    </div>
  )
}

Styling

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

Classes

CSS classes used by this component:

multi-select-clear-button
multi-select-content
multi-select-group
multi-select-item
multi-select-label
multi-select-separator
multi-select-trigger

Accessibility

Ensure proper accessibility attributes are added when implementing this component.

Menubar Navigation Menu

On This Page

Example Installation Components Props <MultiSelectRoot><MultiSelectTrigger><MultiSelectItem>Examples Custom With Icons Styling Classes Accessibility

Contribute