React Combobox Component

Framework

Installation

pnpm add krz-ui

Usage

import { Combobox } from "krz-ui";

<Combobox
  label="Framework"
  placeholder="Select a framework"
  options={[
    { value: "next", label: "Next.js" },
    { value: "remix", label: "Remix" },
  ]}
  value={framework}
  onValueChange={setFramework}
  clearable
/>

API Reference

Prop	Type	Description
`options`	`ComboboxOption[]`	Options with value, label, description and disabled.
`value / defaultValue`	`string \| null`	Controlled or initial selection.
`onValueChange`	`(value: string \| null) => void`	Called with the selected value, or null when cleared.
`label / hint / error`	`ReactNode`	Field label, helper text and error message.
`emptyText`	`ReactNode`	Shown when nothing matches.
`clearable`	`boolean`	Show a button that clears the selection.
`filter`	`(option, query) => boolean`	Custom matching. Defaults to a case-insensitive contains.
`size / disabled / name`	`"sm" \| "md" \| "lg" / boolean / string`	Size, disabled state, and a hidden form field name.
`className / style / ref`	`—`	className and style go on the whole field; ref and native input attributes go to the <input>. See Customization.
`classNames`	`{ label?, control?, input?, icon?, message?, clear?, list?, option?, empty? }`	Extra classes for inner parts.