Combobox

Autocomplete input with searchable dropdown.

Next.js

SvelteKit

Nuxt

Remix

Astro

placeholder

disabled

#Installation

bunx --bun barefoot add combobox

#Usage

Next.js

SvelteKit

Nuxt

Remix

Astro

Selected: None

1"use client"23import { createSignal } from '@barefootjs/dom'4import {5  Combobox, ComboboxTrigger, ComboboxValue, ComboboxContent,6  ComboboxInput, ComboboxEmpty, ComboboxItem,7} from '@/components/ui/combobox'89function ComboboxDemo() {10  const [value, setValue] = createSignal('')1112  return (13    <Combobox value={value()} onValueChange={setValue}>14      <ComboboxTrigger class="w-[280px]">15        <ComboboxValue placeholder="Select framework..." />16      </ComboboxTrigger>17      <ComboboxContent>18        <ComboboxInput placeholder="Search framework..." />19        <ComboboxEmpty>No framework found.</ComboboxEmpty>20        <ComboboxItem value="next">Next.js</ComboboxItem>21        <ComboboxItem value="svelte">SvelteKit</ComboboxItem>22        <ComboboxItem value="nuxt">Nuxt</ComboboxItem>23        <ComboboxItem value="remix">Remix</ComboboxItem>24        <ComboboxItem value="astro">Astro</ComboboxItem>25      </ComboboxContent>26    </Combobox>27  )28}

#Examples

#Basic

Next.js

SvelteKit

Nuxt

Remix

Astro

Selected: None

1"use client"23import { createSignal } from '@barefootjs/dom'4import {5  Combobox, ComboboxTrigger, ComboboxValue, ComboboxContent,6  ComboboxInput, ComboboxEmpty, ComboboxItem,7} from '@/components/ui/combobox'89function ComboboxBasicDemo() {10  const [value, setValue] = createSignal('')1112  return (13    <div className="space-y-3">14      <Combobox value={value()} onValueChange={setValue}>15        <ComboboxTrigger class="w-[280px]">16          <ComboboxValue placeholder="Select framework..." />17        </ComboboxTrigger>18        <ComboboxContent>19          <ComboboxInput placeholder="Search framework..." />20          <ComboboxEmpty>No framework found.</ComboboxEmpty>21          <ComboboxItem value="next">Next.js</ComboboxItem>22          <ComboboxItem value="svelte">SvelteKit</ComboboxItem>23          <ComboboxItem value="nuxt">Nuxt</ComboboxItem>24          <ComboboxItem value="remix">Remix</ComboboxItem>25          <ComboboxItem value="astro">Astro</ComboboxItem>26        </ComboboxContent>27      </Combobox>28      <p className="text-sm text-muted-foreground">29        Selected: {value() || 'None'}30      </p>31    </div>32  )33}

#Form

Tech Stack

Language

TypeScript

JavaScript

Python

Rust

Framework

Next.js

Remix

Hono

FastAPI

Actix

Summary: No selections yet

1"use client"23import { createSignal, createMemo } from '@barefootjs/dom'4import {5  Combobox, ComboboxTrigger, ComboboxValue, ComboboxContent,6  ComboboxInput, ComboboxEmpty, ComboboxItem,7} from '@/components/ui/combobox'89function ComboboxFormDemo() {10  const [language, setLanguage] = createSignal('')11  const [framework, setFramework] = createSignal('')1213  const summary = createMemo(() => {14    const parts: string[] = []15    if (language()) parts.push(language())16    if (framework()) parts.push(`with ${framework()}`)17    return parts.length > 0 ? parts.join(' ') : 'No selections yet'18  })1920  return (21    <div className="space-y-4 max-w-sm">22      <h4 className="text-sm font-medium">Tech Stack</h4>23      <div className="grid gap-3">24        <Combobox value={language()} onValueChange={setLanguage}>25          <ComboboxTrigger>26            <ComboboxValue placeholder="Select language..." />27          </ComboboxTrigger>28          <ComboboxContent>29            <ComboboxInput placeholder="Search language..." />30            <ComboboxEmpty>No language found.</ComboboxEmpty>31            <ComboboxItem value="TypeScript">TypeScript</ComboboxItem>32            <ComboboxItem value="JavaScript">JavaScript</ComboboxItem>33            <ComboboxItem value="Python">Python</ComboboxItem>34            <ComboboxItem value="Go">Go</ComboboxItem>35            <ComboboxItem value="Rust">Rust</ComboboxItem>36          </ComboboxContent>37        </Combobox>38        {/* ... more comboboxes ... */}39      </div>40      <p>Summary: {summary()}</p>41    </div>42  )43}

#Grouped

Eastern Standard Time (EST)

Central Standard Time (CST)

Mountain Standard Time (MST)

Pacific Standard Time (PST)

Greenwich Mean Time (GMT)

Central European Time (CET)

Eastern European Time (EET)

India Standard Time (IST)

China Standard Time (CST)

Japan Standard Time (JST)

Selected: None

1"use client"23import { createSignal } from '@barefootjs/dom'4import {5  Combobox, ComboboxTrigger, ComboboxValue, ComboboxContent,6  ComboboxInput, ComboboxEmpty, ComboboxItem,7  ComboboxGroup, ComboboxSeparator,8} from '@/components/ui/combobox'910function ComboboxGroupedDemo() {11  const [timezone, setTimezone] = createSignal('')1213  return (14    <Combobox value={timezone()} onValueChange={setTimezone}>15      <ComboboxTrigger class="w-[320px]">16        <ComboboxValue placeholder="Select timezone..." />17      </ComboboxTrigger>18      <ComboboxContent>19        <ComboboxInput placeholder="Search timezone..." />20        <ComboboxEmpty>No timezone found.</ComboboxEmpty>21        <ComboboxGroup heading="North America">22          <ComboboxItem value="est">Eastern Standard Time (EST)</ComboboxItem>23          <ComboboxItem value="cst">Central Standard Time (CST)</ComboboxItem>24          <ComboboxItem value="pst">Pacific Standard Time (PST)</ComboboxItem>25        </ComboboxGroup>26        <ComboboxSeparator />27        <ComboboxGroup heading="Europe">28          <ComboboxItem value="gmt">Greenwich Mean Time (GMT)</ComboboxItem>29          <ComboboxItem value="cet">Central European Time (CET)</ComboboxItem>30        </ComboboxGroup>31        <ComboboxSeparator />32        <ComboboxGroup heading="Asia">33          <ComboboxItem value="jst">Japan Standard Time (JST)</ComboboxItem>34          <ComboboxItem value="cst_china">China Standard Time (CST)</ComboboxItem>35        </ComboboxGroup>36      </ComboboxContent>37    </Combobox>38  )39}

#API Reference

Combobox

Prop	Type	Default	Description
value	string	-	Controlled selected value.
onValueChange	(value: string) => void	-	Callback when the selected value changes.
filter	(value: string, search: string) => boolean	-	Custom filter function. Defaults to case-insensitive substring match.

ComboboxItem

Prop	Type	Default	Description
value	string	-	The value for this option (required).
disabled	boolean	false	Whether this option is disabled.

ComboboxInput

Prop	Type	Default	Description
placeholder	string	-	Placeholder text for the search input.
disabled	boolean	false	Whether the search input is disabled.