Combobox

Searchable dropdown for selecting from a filterable list of options.

Basic

<HStack justify="center">
  <Combobox>
    <ComboboxInput placeholder="Select a framework..." />
    <ComboboxContent>
      <ComboboxList>
        <ComboboxEmpty>No framework found.</ComboboxEmpty>
        <ComboboxItem value="react">React</ComboboxItem>
        <ComboboxItem value="vue">Vue</ComboboxItem>
        <ComboboxItem value="angular">Angular</ComboboxItem>
        <ComboboxItem value="svelte">Svelte</ComboboxItem>
        <ComboboxItem value="solid">Solid</ComboboxItem>
      </ComboboxList>
    </ComboboxContent>
  </Combobox>
</HStack>

With groups

<HStack justify="center">
  <Combobox>
    <ComboboxInput placeholder="Select a location..." />
    <ComboboxContent>
      <ComboboxList>
        <ComboboxEmpty>No location found.</ComboboxEmpty>
        <ComboboxGroup>
          <ComboboxLabel>North America</ComboboxLabel>
          <ComboboxItem value="new-york">New York</ComboboxItem>
          <ComboboxItem value="los-angeles">Los Angeles</ComboboxItem>
          <ComboboxItem value="toronto">Toronto</ComboboxItem>
        </ComboboxGroup>
        <ComboboxSeparator />
        <ComboboxGroup>
          <ComboboxLabel>Europe</ComboboxLabel>
          <ComboboxItem value="london">London</ComboboxItem>
          <ComboboxItem value="paris">Paris</ComboboxItem>
          <ComboboxItem value="berlin">Berlin</ComboboxItem>
        </ComboboxGroup>
        <ComboboxSeparator />
        <ComboboxGroup>
          <ComboboxLabel>Asia</ComboboxLabel>
          <ComboboxItem value="tokyo">Tokyo</ComboboxItem>
          <ComboboxItem value="singapore">Singapore</ComboboxItem>
          <ComboboxItem value="hong-kong">Hong Kong</ComboboxItem>
        </ComboboxGroup>
      </ComboboxList>
    </ComboboxContent>
  </Combobox>
</HStack>

With clear button

<HStack justify="center">
  <Combobox>
    <ComboboxInput placeholder="Select a status..." showClear />
    <ComboboxContent>
      <ComboboxList>
        <ComboboxEmpty>No status found.</ComboboxEmpty>
        <ComboboxItem value="open">Open</ComboboxItem>
        <ComboboxItem value="in-progress">In Progress</ComboboxItem>
        <ComboboxItem value="pending">Pending</ComboboxItem>
        <ComboboxItem value="completed">Completed</ComboboxItem>
        <ComboboxItem value="cancelled">Cancelled</ComboboxItem>
      </ComboboxList>
    </ComboboxContent>
  </Combobox>
</HStack>

Disabled

<HStack justify="center">
  <Combobox>
    <ComboboxInput placeholder="Select an option..." disabled />
    <ComboboxContent>
      <ComboboxList>
        <ComboboxItem value="option-1">Option 1</ComboboxItem>
        <ComboboxItem value="option-2">Option 2</ComboboxItem>
      </ComboboxList>
    </ComboboxContent>
  </Combobox>
</HStack>

With disabled items

<HStack justify="center">
  <Combobox>
    <ComboboxInput placeholder="Select a plan..." />
    <ComboboxContent>
      <ComboboxList>
        <ComboboxEmpty>No plan found.</ComboboxEmpty>
        <ComboboxItem value="free">Free</ComboboxItem>
        <ComboboxItem value="starter">Starter</ComboboxItem>
        <ComboboxItem value="pro">Pro</ComboboxItem>
        <ComboboxItem value="enterprise" disabled>Enterprise (Coming soon)</ComboboxItem>
      </ComboboxList>
    </ComboboxContent>
  </Combobox>
</HStack>