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
() => { const [options1, setOptions1] = React.useState(); const options = [ { label: "London", value: "london" }, { label: "Sydney", value: "sydney" }, { label: "Shanghai", value: "shanghai" } ]; return ( <Container gap={"small"}> <Text>{"default"}</Text> <Container gap={10}> <Combobox placeholder={"Enter here"} options={options} /> </Container> </Container> ); }
↓Code Editor
↓Code Editor
() => { const [options1, setOptions1] = React.useState(); const options = [ { label: "London", value: "london" }, { label: "Sydney", value: "sydney" }, { label: "Shanghai", value: "shanghai" } ]; return ( <Container gap={"small"}> <Text>{"default"}</Text> <Container gap={10}> <Combobox placeholder={"Enter here"} options={options} /> </Container> </Container> ); }
Disabled
() => { const options = [ { label: "London", value: "london" }, { label: "Sydney", value: "sydney" }, { label: "Shanghai", value: "shanghai" }, ]; return ( <Combobox disabled initialValue="London" options={options} /> ); }
↓Code Editor
↓Code Editor
() => { const options = [ { label: "London", value: "london" }, { label: "Sydney", value: "sydney" }, { label: "Shanghai", value: "shanghai" }, ]; return ( <Combobox disabled initialValue="London" options={options} /> ); }
Search
() => { const options = [ { label: "London", value: "london" }, { label: "Sydney", value: "sydney" }, { label: "Shanghai", value: "shanghai" }, ]; const [filteredOptions, setFilteredOptions] = React.useState(); const searchHandler = (currentValue) => { if (!currentValue) return setFilteredOptions([]); const relatedOptions = options.filter((item) => item.value.includes(currentValue) ); setFilteredOptions(relatedOptions); }; return ( <Combobox options={filteredOptions} placeholder="Enter here" onSearch={searchHandler} /> ); }
↓Code Editor
↓Code Editor
() => { const options = [ { label: "London", value: "london" }, { label: "Sydney", value: "sydney" }, { label: "Shanghai", value: "shanghai" }, ]; const [filteredOptions, setFilteredOptions] = React.useState(); const searchHandler = (currentValue) => { if (!currentValue) return setFilteredOptions([]); const relatedOptions = options.filter((item) => item.value.includes(currentValue) ); setFilteredOptions(relatedOptions); }; return ( <Combobox options={filteredOptions} placeholder="Enter here" onSearch={searchHandler} /> ); }
Only Allow Selected
() => { const options = [ { label: "London", value: "london" }, { label: "Sydney", value: "sydney" }, { label: "Shanghai", value: "shanghai" } ]; return ( <Container gap={"small"}> <Text>{"only allow selected"}</Text> <Container gap={10}> <Combobox disableFreeSolo options={options} initialValue={"sydney"} /> </Container> </Container> ); }
↓Code Editor
↓Code Editor
() => { const options = [ { label: "London", value: "london" }, { label: "Sydney", value: "sydney" }, { label: "Shanghai", value: "shanghai" } ]; return ( <Container gap={"small"}> <Text>{"only allow selected"}</Text> <Container gap={10}> <Combobox disableFreeSolo options={options} initialValue={"sydney"} /> </Container> </Container> ); }
Loading State
() => { const options = [ { label: "London", value: "london" }, { label: "Sydney", value: "sydney" }, { label: "Shanghai", value: "shanghai" } ]; const [filteredOptions, setFilteredOptions] = React.useState(); const [isSearching, setIsSearching] = React.useState(false); const searchHandler = (currentValue) => { if (!currentValue) return setFilteredOptions([]); setIsSearching(true); // Simulate API call setTimeout(() => { const relatedOptions = options.filter((item) => item.value.includes(currentValue) ); setFilteredOptions(relatedOptions); setIsSearching(false); }, 1000); }; return ( <Container gap={"small"}> <Text>{"loading state"}</Text> <Container gap={10}> <Combobox searching={isSearching} options={filteredOptions} placeholder="Enter here" onSearch={searchHandler} /> </Container> </Container> ); }
↓Code Editor
↓Code Editor
() => { const options = [ { label: "London", value: "london" }, { label: "Sydney", value: "sydney" }, { label: "Shanghai", value: "shanghai" } ]; const [filteredOptions, setFilteredOptions] = React.useState(); const [isSearching, setIsSearching] = React.useState(false); const searchHandler = (currentValue) => { if (!currentValue) return setFilteredOptions([]); setIsSearching(true); // Simulate API call setTimeout(() => { const relatedOptions = options.filter((item) => item.value.includes(currentValue) ); setFilteredOptions(relatedOptions); setIsSearching(false); }, 1000); }; return ( <Container gap={"small"}> <Text>{"loading state"}</Text> <Container gap={10}> <Combobox searching={isSearching} options={filteredOptions} placeholder="Enter here" onSearch={searchHandler} /> </Container> </Container> ); }
Waiting in Search
() => { const options = [ { label: "London", value: "london" }, { label: "Sydney", value: "sydney" }, { label: "Shanghai", value: "shanghai" } ]; const [options2, setOptions2] = React.useState(); const [searching1, setSearching1] = React.useState(false); const timer = React.useRef(); const searchHandler2 = (currentValue) => { if (!currentValue) return setOptions2([]); setSearching1(true); timer.current && clearTimeout(timer.current); timer.current = setTimeout(() => { const relatedOptions = options.filter((item) => item.value.includes(currentValue) ); setOptions2(relatedOptions); setSearching1(false); clearTimeout(timer.current); }, 1000); }; return ( <Container gap={"small"}> <Text>{"waiting in search"}</Text> <Container gap={10}> <Combobox searching={searching1} options={options2} placeholder={"Enter here"} onSearch={searchHandler2} /> </Container> </Container> ); }
↓Code Editor
↓Code Editor
() => { const options = [ { label: "London", value: "london" }, { label: "Sydney", value: "sydney" }, { label: "Shanghai", value: "shanghai" } ]; const [options2, setOptions2] = React.useState(); const [searching1, setSearching1] = React.useState(false); const timer = React.useRef(); const searchHandler2 = (currentValue) => { if (!currentValue) return setOptions2([]); setSearching1(true); timer.current && clearTimeout(timer.current); timer.current = setTimeout(() => { const relatedOptions = options.filter((item) => item.value.includes(currentValue) ); setOptions2(relatedOptions); setSearching1(false); clearTimeout(timer.current); }, 1000); }; return ( <Container gap={"small"}> <Text>{"waiting in search"}</Text> <Container gap={10}> <Combobox searching={searching1} options={options2} placeholder={"Enter here"} onSearch={searchHandler2} /> </Container> </Container> ); }
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 |