Combobox

A searchable select. Radix has no dedicated Combobox primitive, so this composes Popover (positioning) and Command (search/filter) behind a sketchy, Select-styled trigger — the same recipe shadcn uses.

Roughness1.5Lock seedAnimate

<Combobox
  options={[
    { value: "pen", label: "Pen" },
    { value: "pencil", label: "Pencil" },
    { value: "brush", label: "Brush" },
  ]}
  placeholder="Select a tool…"
  roughness={1.5}
/>

CLI install

npx doodleui-react add combobox

Usage

import { Combobox } from "doodleui-react";

<Combobox
  options={[
    { value: "pen", label: "Pen" },
    { value: "pencil", label: "Pencil" },
    { value: "brush", label: "Brush" },
  ]}
  placeholder="Select a tool…"
/>

Reach for Select when the list is short and doesn't need search; reach for Combobox once the list is long enough that typing beats scrolling.

Props

Prop	Type	Default	Notes
options	SelectOption[]	required	Same shape as Select's options: value, label, optional disabled.
placeholder / searchPlaceholder	string	"Select…" / "Search…"	Trigger caption and the Command input's placeholder.
emptyMessage	ReactNode	"No results."	Shown when the search matches nothing.
value / onValueChange	string / (value: string) => void	uncontrolled	Selected option value.
animate	boolean	true	Draw-in the trigger on mount and the popover border on open. Overrides DoodleUIProvider. Reduced motion disables this unless the provider set forceAnimate.
roughness	number	1.5	How wobbly the stroke is. 0 is almost geometric. 3+ is messy.
seed	number	provider / random	Locks the sketch. Omit to follow SketchSeedProvider (Shuffle) or a mount-time random seed.
sketchColor	string	#1f1d1a	Stroke color. Also tints primary/accent fills where relevant.
className	string	undefined	Passed through to the root element.
style	CSSProperties	undefined	Passed through to the root element.