Combobox

The Combobox component provides an enhanced input field with autocomplete functionality, allowing users to either select from predefined options or enter custom values.

Usage

First of all, you need to import the Combobox component from the kitchn package.

import { Combobox } from "kitchn"

Default

Disabled

Search

Only Allow Selected

Loading State

Waiting in Search

Props

Combobox Props

Name	Type	Default	Required	Description
`options`	`Array<{ label: string; value: string }>`	`[]`	No	Array of options to display in the dropdown
`placeholder`	`string`	`""`	No	Placeholder text for the input field
`initialValue`	`string`	`undefined`	No	Initial value for the input field
`disabled`	`boolean`	`false`	No	If `true`, the combobox becomes non-interactive
`disableFreeSolo`	`boolean`	`false`	No	If `true`, only allows selection from provided options
`searching`	`boolean`	`false`	No	Indicates if the component is in a loading state
`clearable`	`boolean`	`false`	No	If `true`, shows a clear button when there is input
`onSearch`	`(value: string) => void`	`undefined`	No	Callback function triggered on input change
`onChange`	`(value: string) => void`	`undefined`	No	Callback function triggered when value changes

ComboboxSearching Props

Name	Type	Default	Required	Description
`children`	`React.ReactNode`	`undefined`	No	Custom content to display during loading state

ComboboxEmpty Props

Name	Type	Default	Required	Description
`children`	`React.ReactNode`	`undefined`	No	Custom content to display when no options match

Collapse Drawer