Combobox

<Combobox
  value="colors-fonts"
  clearable
  options={[
    { value: "lexington", label: "lexingtonthemes.com" },
    { value: "colors-fonts", label: "colorsandfonts.com" },
    { value: "oxbow", label: "oxbowui.com" },
  ]}
  placeholder="Select a domain"
/>

<Combobox
  options={[
    {
      heading: "Marketplace",
      options: [
        { value: "lexington", label: "lexingtonthemes.com" },
        { value: "colors-fonts", label: "colorsandfonts.com" },
      ],
    },
    {
      heading: "UI",
      options: [
        { value: "oxbow", label: "oxbowui.com" },
      ],
    },
  ]}
  placeholder="Select a domain"
/>

<Combobox
  options={[
    {
      value: "nyc",
      label: "New York Office",
      description: "Eastern Time",
      meta: "NY",
    },
    {
      value: "london",
      label: "London Office",
      description: "Greenwich Mean Time",
      meta: "LDN",
    },
    {
      value: "tokyo",
      label: "Tokyo Office",
      description: "Japan Standard Time",
      meta: "TYO",
    },
  ]}
  placeholder="Search offices..."
/>

<InputGroup class="w-[320px]">
  <InputGroupAddon align="inline-start">
    <Globe size="sm" />
  </InputGroupAddon>
  <Combobox
    inputGroupControl
    value="gmt-minus-5"
    options={[
      { value: "gmt-minus-8", label: "(GMT-8) Los Angeles" },
      { value: "gmt-minus-5", label: "(GMT-5) New York" },
      { value: "gmt-plus-0", label: "(GMT+0) London" },
      { value: "gmt-plus-9", label: "(GMT+9) Tokyo" },
    ]}
    placeholder="Select a timezone"
  />
</InputGroup>