Documentation
Combobox

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
() => {
    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
() => {
      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
() => {
      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
() => {
   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
() => {
   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
() => {
   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

NameTypeDefaultRequiredDescription
optionsArray<{ label: string; value: string }>[]NoArray of options to display in the dropdown
placeholderstring""NoPlaceholder text for the input field
initialValuestringundefinedNoInitial value for the input field
disabledbooleanfalseNoIf true, the combobox becomes non-interactive
disableFreeSolobooleanfalseNoIf true, only allows selection from provided options
searchingbooleanfalseNoIndicates if the component is in a loading state
clearablebooleanfalseNoIf true, shows a clear button when there is input
onSearch(value: string) => voidundefinedNoCallback function triggered on input change
onChange(value: string) => voidundefinedNoCallback function triggered when value changes

ComboboxSearching Props

NameTypeDefaultRequiredDescription
childrenReact.ReactNodeundefinedNoCustom content to display during loading state

ComboboxEmpty Props

NameTypeDefaultRequiredDescription
childrenReact.ReactNodeundefinedNoCustom content to display when no options match