Components
Combobox
A searchable hand-drawn select with filtered dropdown and keyboard navigation.
Installation
package manager
npx shadcn add https://bydefaulthuman.fun/r/combobox.jsonProps
PropTypeDefaultDescription
classNamestring—
Additional Tailwind classes applied to the component.
defaultValuestring""Initial uncontrolled value.
disabledbooleanfalseDisables interaction.
errorstring—
Error message shown below the component.
idstring—
Optional stable id used for sketch seeding and accessibility.
labelstring—
Optional label text shown with the component.
onBlur() => void—
Optional callback for component events.
onChange(value: string) => void—
Callback fired when the value changes.
onFocus() => void—
Optional callback for component events.
options*ComboboxOption[]—
Options rendered by the component.
placeholderstring"Search..."Placeholder text shown before a value is entered or selected.
themeCrumbleTheme—
Overrides the global Crumble theme for this instance.
valuestring—
Controlled value for the component.
With disabled options
Error state
Please select a country
Accessibility
Combobox combines text filtering with option selection, so labels and placeholder copy should make the search target explicit. Keep option text unique so the filtered list is easy to navigate.
Examples
import { Combobox } from "@/components/crumble/ui/combobox";
<Combobox
label="Framework"
placeholder="Search..."
options={[
{ value: "next", label: "Next.js" },
{ value: "remix", label: "Remix" },
{ value: "astro", label: "Astro" },
{ value: "svelte", label: "SvelteKit" },
]}
/>;