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

Combobox

A searchable dropdown that combines an input with a list of selectable options.

ComboBox provides an autocomplete or command palette interface where users can type to filter and search through options. It's ideal for selecting from large lists where scrolling would be impractical. The component combines the functionality of a text input with a dropdown menu, offering type-ahead search and keyboard navigation.

Example

"use client"

import { useState } from "react"
import {
  ComboBox,
  ComboBoxContent,
  ComboBoxEmpty,
  ComboBoxInput,
  ComboBoxItem,
  ComboBoxList,
  ComboBoxTrigger,
} from "@strongtie/design-system/combobox"
import { MdCheck, MdUnfoldMore } from "react-icons/md"

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

export function ComboboxDefault() {
  const [open, setOpen] = useState(false)
  const [value, setValue] = useState("")

  return (
    <ComboBox open={open} onOpenChange={setOpen}>
      <ComboBoxTrigger className="min-w-[200px]">
        {value
          ? frameworks.find((framework) => framework.value === value)?.label
          : "Select framework..."}
        <MdUnfoldMore className="h-4 w-4" />
      </ComboBoxTrigger>
      <ComboBoxContent>
        <ComboBoxInput placeholder="Search framework..." />
        <ComboBoxList>
          <ComboBoxEmpty>No framework found.</ComboBoxEmpty>

          {frameworks.map((framework) => (
            <ComboBoxItem
              key={framework.value}
              value={framework.value}
              onSelect={(currentValue) => {
                setValue(currentValue === value ? "" : currentValue)
                setOpen(false)
              }}
            >
              <MdCheck
                className={
                  value === framework.value ? "opacity-100" : "opacity-0"
                }
              />
              {framework.label}
            </ComboBoxItem>
          ))}
        </ComboBoxList>
      </ComboBoxContent>
    </ComboBox>
  )
}

Installation


npm install @strongtie/design-system

import { Combobox } from "@strongtie/design-system/combobox"

Components

This module exports the following components:

ComboBox
ComboBoxTrigger
ComboBoxTriggerInput
ComboBoxContent
ComboBoxInput
ComboBoxList
ComboBoxEmpty
ComboBoxItemGroup
ComboBoxItem

Props

`<ComboBoxTriggerInput>`

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

Prop	Type	Default	Description
`onValueChange`	`((search: string) => void)`	-	Event handler called when the search value changes.
`value`	`string`	-	Optional controlled state for the value of the search input.

`<ComboBoxInput>`

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

Prop	Type	Default	Description
`icon`	`ElementType<any, keyof IntrinsicElements> \| null`	-
`onValueChange`	`((search: string) => void)`	-	Event handler called when the search value changes.
`value`	`string`	-	Optional controlled state for the value of the search input.

`<ComboBoxList>`

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

Prop	Type	Default	Description
`label`	`string`	-	Accessible label for this List of suggestions. Not shown visibly.

`<ComboBoxItemGroup>`

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

Prop	Type	Default	Description
`forceMount`	`boolean`	-	Whether this group is forcibly rendered regardless of filtering.
`heading`	`ReactNode`	-	Optional heading to render for this group.
`value`	`string`	-	If no heading is provided, you must provide a value that is unique for this group.

`<ComboBoxItem>`

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

Prop	Type	Default	Description
`disabled`	`boolean`	-	Whether this item is currently disabled.
`forceMount`	`boolean`	-	Whether this item is forcibly rendered regardless of filtering.
`keywords`	`string[]`	-	Optional keywords to match against when filtering.
`onSelect`	`((value: string) => void)`	-	Event handler for when this item is selected, either via click or keyboard selection.
`selected`	`boolean`	`false`	Whether this item is currently selected.
`value`	`string`	-	A unique value for this item. If no value is provided, it will be inferred from `children` or the rendered `textContent`. If your `textContent` changes between renders, you must provide a stable, unique `value`.

Examples

"use client"

import { useState } from "react"
import {
  ComboBox,
  ComboBoxContent,
  ComboBoxEmpty,
  ComboBoxInput,
  ComboBoxItem,
  ComboBoxList,
  ComboBoxTrigger,
} from "@strongtie/design-system/combobox"
import { MdCheck, MdUnfoldMore } from "react-icons/md"

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

export function ComboboxDefault() {
  const [open, setOpen] = useState(false)
  const [value, setValue] = useState("")

  return (
    <ComboBox open={open} onOpenChange={setOpen}>
      <ComboBoxTrigger className="min-w-[200px]">
        {value
          ? frameworks.find((framework) => framework.value === value)?.label
          : "Select framework..."}
        <MdUnfoldMore className="h-4 w-4" />
      </ComboBoxTrigger>
      <ComboBoxContent>
        <ComboBoxInput placeholder="Search framework..." />
        <ComboBoxList>
          <ComboBoxEmpty>No framework found.</ComboBoxEmpty>

          {frameworks.map((framework) => (
            <ComboBoxItem
              key={framework.value}
              value={framework.value}
              onSelect={(currentValue) => {
                setValue(currentValue === value ? "" : currentValue)
                setOpen(false)
              }}
            >
              <MdCheck
                className={
                  value === framework.value ? "opacity-100" : "opacity-0"
                }
              />
              {framework.label}
            </ComboBoxItem>
          ))}
        </ComboBoxList>
      </ComboBoxContent>
    </ComboBox>
  )
}

With Inline Search

"use client"

import * as React from "react"
import {
  ComboBox,
  ComboBoxContent,
  ComboBoxEmpty,
  ComboBoxItem,
  ComboBoxItemGroup,
  ComboBoxList,
  ComboBoxTriggerInput,
} from "@strongtie/design-system/combobox"
import { MdUnfoldMore } from "react-icons/md"

const frameworks = [
  {
    value: "next.js",
    label: "Next.js",
  },
  {
    value: "sveltekit",
    label: "SvelteKit",
  },
  {
    value: "nuxt.js",
    label: "Nuxt.js",
  },
  {
    value: "remix",
    label: "Remix",
  },
  {
    value: "astro",
    label: "Astro",
  },
]

export function ComboboxWithInlineSearch() {
  const [open, setOpen] = React.useState(false)
  const [value, setValue] = React.useState("")

  return (
    <ComboBox open={open} onOpenChange={setOpen}>
      <ComboBoxTriggerInput
        placeholder="Search framework..."
        value={value}
        onValueChange={(v) => setValue(v)}
      >
        <MdUnfoldMore />
      </ComboBoxTriggerInput>
      <ComboBoxContent onOpenAutoFocus={(e) => e.preventDefault()}>
        <ComboBoxList>
          <ComboBoxEmpty>No framework found.</ComboBoxEmpty>
          <ComboBoxItemGroup>
            {frameworks.map((framework) => (
              <ComboBoxItem
                key={framework.value}
                value={framework.value}
                onSelect={(currentValue) => {
                  setValue(currentValue === value ? "" : currentValue)
                  setOpen(false)
                }}
                selected={value === framework.value}
              >
                {framework.label}
              </ComboBoxItem>
            ))}
          </ComboBoxItemGroup>
        </ComboBoxList>
      </ComboBoxContent>
    </ComboBox>
  )
}

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:

combobox-trigger

Additional Classes

Other CSS classes used by this component:

-selected
combobox
combobox-empty
combobox-input
combobox-item
combobox-item-group
combobox-list
combobox-trigger
combobox-trigger-input
menu-item

Accessibility

This component inherits accessibility features from Radix UI, including:

Keyboard navigation support
ARIA attributes
Focus management
Screen reader compatibility

Resources

Radix UI popover Documentation

Collapsible Context Menu

On This Page

Example Installation Components Props <ComboBoxTriggerInput><ComboBoxInput><ComboBoxList><ComboBoxItemGroup><ComboBoxItem>Examples With Inline Search Styling Component Slots Additional Classes Accessibility Resources

Contribute

Combobox

A searchable dropdown that combines an input with a list of selectable options.

Example

"use client"

import { useState } from "react"
import {
  ComboBox,
  ComboBoxContent,
  ComboBoxEmpty,
  ComboBoxInput,
  ComboBoxItem,
  ComboBoxList,
  ComboBoxTrigger,
} from "@strongtie/design-system/combobox"
import { MdCheck, MdUnfoldMore } from "react-icons/md"

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

export function ComboboxDefault() {
  const [open, setOpen] = useState(false)
  const [value, setValue] = useState("")

  return (
    <ComboBox open={open} onOpenChange={setOpen}>
      <ComboBoxTrigger className="min-w-[200px]">
        {value
          ? frameworks.find((framework) => framework.value === value)?.label
          : "Select framework..."}
        <MdUnfoldMore className="h-4 w-4" />
      </ComboBoxTrigger>
      <ComboBoxContent>
        <ComboBoxInput placeholder="Search framework..." />
        <ComboBoxList>
          <ComboBoxEmpty>No framework found.</ComboBoxEmpty>

          {frameworks.map((framework) => (
            <ComboBoxItem
              key={framework.value}
              value={framework.value}
              onSelect={(currentValue) => {
                setValue(currentValue === value ? "" : currentValue)
                setOpen(false)
              }}
            >
              <MdCheck
                className={
                  value === framework.value ? "opacity-100" : "opacity-0"
                }
              />
              {framework.label}
            </ComboBoxItem>
          ))}
        </ComboBoxList>
      </ComboBoxContent>
    </ComboBox>
  )
}

Installation


npm install @strongtie/design-system

import { Combobox } from "@strongtie/design-system/combobox"

Components

This module exports the following components:

ComboBox
ComboBoxTrigger
ComboBoxTriggerInput
ComboBoxContent
ComboBoxInput
ComboBoxList
ComboBoxEmpty
ComboBoxItemGroup
ComboBoxItem

Props

`<ComboBoxTriggerInput>`

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

Prop	Type	Default	Description
`onValueChange`	`((search: string) => void)`	-	Event handler called when the search value changes.
`value`	`string`	-	Optional controlled state for the value of the search input.

`<ComboBoxInput>`

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

Prop	Type	Default	Description
`icon`	`ElementType<any, keyof IntrinsicElements> \| null`	-
`onValueChange`	`((search: string) => void)`	-	Event handler called when the search value changes.
`value`	`string`	-	Optional controlled state for the value of the search input.

`<ComboBoxList>`

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

Prop	Type	Default	Description
`label`	`string`	-	Accessible label for this List of suggestions. Not shown visibly.

`<ComboBoxItemGroup>`

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

Prop	Type	Default	Description
`forceMount`	`boolean`	-	Whether this group is forcibly rendered regardless of filtering.
`heading`	`ReactNode`	-	Optional heading to render for this group.
`value`	`string`	-	If no heading is provided, you must provide a value that is unique for this group.

`<ComboBoxItem>`

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

Prop	Type	Default	Description
`disabled`	`boolean`	-	Whether this item is currently disabled.
`forceMount`	`boolean`	-	Whether this item is forcibly rendered regardless of filtering.
`keywords`	`string[]`	-	Optional keywords to match against when filtering.
`onSelect`	`((value: string) => void)`	-	Event handler for when this item is selected, either via click or keyboard selection.
`selected`	`boolean`	`false`	Whether this item is currently selected.
`value`	`string`	-	A unique value for this item. If no value is provided, it will be inferred from `children` or the rendered `textContent`. If your `textContent` changes between renders, you must provide a stable, unique `value`.

Examples

"use client"

import { useState } from "react"
import {
  ComboBox,
  ComboBoxContent,
  ComboBoxEmpty,
  ComboBoxInput,
  ComboBoxItem,
  ComboBoxList,
  ComboBoxTrigger,
} from "@strongtie/design-system/combobox"
import { MdCheck, MdUnfoldMore } from "react-icons/md"

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

export function ComboboxDefault() {
  const [open, setOpen] = useState(false)
  const [value, setValue] = useState("")

  return (
    <ComboBox open={open} onOpenChange={setOpen}>
      <ComboBoxTrigger className="min-w-[200px]">
        {value
          ? frameworks.find((framework) => framework.value === value)?.label
          : "Select framework..."}
        <MdUnfoldMore className="h-4 w-4" />
      </ComboBoxTrigger>
      <ComboBoxContent>
        <ComboBoxInput placeholder="Search framework..." />
        <ComboBoxList>
          <ComboBoxEmpty>No framework found.</ComboBoxEmpty>

          {frameworks.map((framework) => (
            <ComboBoxItem
              key={framework.value}
              value={framework.value}
              onSelect={(currentValue) => {
                setValue(currentValue === value ? "" : currentValue)
                setOpen(false)
              }}
            >
              <MdCheck
                className={
                  value === framework.value ? "opacity-100" : "opacity-0"
                }
              />
              {framework.label}
            </ComboBoxItem>
          ))}
        </ComboBoxList>
      </ComboBoxContent>
    </ComboBox>
  )
}

With Inline Search

"use client"

import * as React from "react"
import {
  ComboBox,
  ComboBoxContent,
  ComboBoxEmpty,
  ComboBoxItem,
  ComboBoxItemGroup,
  ComboBoxList,
  ComboBoxTriggerInput,
} from "@strongtie/design-system/combobox"
import { MdUnfoldMore } from "react-icons/md"

const frameworks = [
  {
    value: "next.js",
    label: "Next.js",
  },
  {
    value: "sveltekit",
    label: "SvelteKit",
  },
  {
    value: "nuxt.js",
    label: "Nuxt.js",
  },
  {
    value: "remix",
    label: "Remix",
  },
  {
    value: "astro",
    label: "Astro",
  },
]

export function ComboboxWithInlineSearch() {
  const [open, setOpen] = React.useState(false)
  const [value, setValue] = React.useState("")

  return (
    <ComboBox open={open} onOpenChange={setOpen}>
      <ComboBoxTriggerInput
        placeholder="Search framework..."
        value={value}
        onValueChange={(v) => setValue(v)}
      >
        <MdUnfoldMore />
      </ComboBoxTriggerInput>
      <ComboBoxContent onOpenAutoFocus={(e) => e.preventDefault()}>
        <ComboBoxList>
          <ComboBoxEmpty>No framework found.</ComboBoxEmpty>
          <ComboBoxItemGroup>
            {frameworks.map((framework) => (
              <ComboBoxItem
                key={framework.value}
                value={framework.value}
                onSelect={(currentValue) => {
                  setValue(currentValue === value ? "" : currentValue)
                  setOpen(false)
                }}
                selected={value === framework.value}
              >
                {framework.label}
              </ComboBoxItem>
            ))}
          </ComboBoxItemGroup>
        </ComboBoxList>
      </ComboBoxContent>
    </ComboBox>
  )
}

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:

combobox-trigger

Additional Classes

Other CSS classes used by this component:

-selected
combobox
combobox-empty
combobox-input
combobox-item
combobox-item-group
combobox-list
combobox-trigger
combobox-trigger-input
menu-item

Accessibility

This component inherits accessibility features from Radix UI, including:

Keyboard navigation support
ARIA attributes
Focus management
Screen reader compatibility

Resources

Radix UI popover Documentation

Collapsible Context Menu

On This Page

Contribute