Combobox

Autocomplete input with searchable dropdown.

placeholder

disabled

#Installation

npx @barefootjs/cli add combobox

#Usage

Selected: None

1"use client"23import { createSignal } from '@barefootjs/client'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

Selected: None

1"use client"23import { createSignal } from '@barefootjs/client'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

Framework

Summary: No selections yet

1"use client"23import { createSignal, createMemo } from '@barefootjs/client'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

Selected: None

1"use client"23import { createSignal } from '@barefootjs/client'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.