Combobox

<script lang="ts">
  import { Combobox, ComboboxContent, ComboboxInput, ComboboxItem } from '$lib/components/combobox';
 
  const roles = [
    { value: 'admin', label: 'Admin' },
    { value: 'editor', label: 'Editor' },
    { value: 'reviewer', label: 'Reviewer' },
    { value: 'guest', label: 'Guest' }
  ];
 
  let inputValue = '';
  let touchedInput = false;
 
  $: filteredRoles = inputValue && touchedInput ? roles.filter((role) => role.label.toLowerCase().includes(inputValue.toLowerCase())) : roles;
</script>

<Combobox items={filteredRoles} bind:inputValue bind:touchedInput>
  <ComboboxInput placeholder="Assign user roles" />
  <ComboboxContent>
    {#each filteredRoles as role (role.value)}
      <ComboboxItem value={role.value} label={role.label}>
        {role.label}
      </ComboboxItem>
    {:else}
      <span>No roles found</span>
    {/each}
  </ComboboxContent>
</Combobox>