Skip to content
Appearance
Accent and overlay
Color mode

Combobox

An input that filters a list of options.

Upstream documentation

Examples

Installation

Run the Ninaero registry command to install the component and its dependencies, including shared theme styles.

Install Combobox
pnpm dlx shadcn@latest add 'https://ninaero.pages.dev/r/combobox.json'

Usage

A complete example using the installed component and hook paths.

Combobox usage
"use client";import { useId } from "react";import { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList } from "@/components/ui/combobox";import { Label } from "@/components/ui/label";function ComboboxPreview() {  const id = useId();  return (    <div className="w-full max-w-64 space-y-2">      <Label htmlFor={id}>Fruit</Label>      <Combobox items={["Apple", "Banana", "Cherry"]}>        <ComboboxInput id={id} placeholder="Choose a fruit" />        <ComboboxContent>          <ComboboxEmpty>No matching fruit</ComboboxEmpty>          <ComboboxList>            {(fruit: string) => (              <ComboboxItem key={fruit} value={fruit}>                {fruit}              </ComboboxItem>            )}          </ComboboxList>        </ComboboxContent>      </Combobox>    </div>  );}export default function Demo() {  return <ComboboxPreview />;}

API Reference

Ninaero exports and local defaults are listed below. See the upstream reference for inherited primitive props and additional composition examples.

Combobox

Combobox props
ComboboxPrimitive.Root.Props<Value, Multiple, Item> & { sound?: boolean }
sound
true

ComboboxInput

ComboboxInput props
ComboboxPrimitive.Input.Props & {  showTrigger?: boolean;  showClear?: boolean;}
disabled
false
showTrigger
true
showClear
false

ComboboxContent

ComboboxContent props
ComboboxPrimitive.Popup.Props &  Pick<    ComboboxPrimitive.Positioner.Props,    "side" | "align" | "sideOffset" | "alignOffset" | "anchor"  >
side
"bottom"
sideOffset
6
align
"start"
alignOffset
0

ComboboxList

ComboboxList props
ComboboxPrimitive.List.Props

ComboboxItem

ComboboxItem props
ComboboxPrimitive.Item.Props

ComboboxGroup

ComboboxGroup props
ComboboxPrimitive.Group.Props

ComboboxLabel

ComboboxLabel props
ComboboxPrimitive.GroupLabel.Props

ComboboxCollection

ComboboxCollection props
ComboboxPrimitive.Collection.Props

ComboboxEmpty

ComboboxEmpty props
ComboboxPrimitive.Empty.Props

ComboboxSeparator

ComboboxSeparator props
ComboboxPrimitive.Separator.Props

ComboboxChips

ComboboxChips props
React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> & ComboboxPrimitive.Chips.Props

ComboboxChip

ComboboxChip props
ComboboxPrimitive.Chip.Props & {  showRemove?: boolean;}
showRemove
true

ComboboxChipsInput

ComboboxChipsInput props
ComboboxPrimitive.Input.Props

ComboboxTrigger

ComboboxTrigger props
ComboboxPrimitive.Trigger.Props & { sound?: boolean }
sound
true

ComboboxValue

ComboboxValue props
ComboboxPrimitive.Value.Props

useComboboxAnchor

Re-exported primitive; see the upstream API reference.

Source

Registry JSON