Combobox

<script setup lang="ts">
import {
  AComboboxAnchor,
  AComboboxArrow,
  AComboboxCancel,
  AComboboxContent,
  AComboboxGroup,
  AComboboxInput,
  AComboboxItem,
  AComboboxItemIndicator,
  AComboboxLabel,
  AComboboxPortal,
  AComboboxRoot,
  AComboboxSeparator,
  AComboboxTrigger,
  AComboboxViewport,
} from 'akar';
</script>

<template>
  <AComboboxRoot>
    <AComboboxAnchor>
      <AComboboxInput />
      <AComboboxTrigger />
      <AComboboxCancel />
    </AComboboxAnchor>

    <AComboboxPortal>
      <AComboboxContent>
        <AComboboxViewport>
          <AComboboxItem>
            <AComboboxItemIndicator />
          </AComboboxItem>

          <AComboboxGroup>
            <AComboboxLabel />
            <AComboboxItem>
              <AComboboxItemIndicator />
            </AComboboxItem>
          </AComboboxGroup>
          <AComboboxSeparator />
        </AComboboxViewport>

        <AComboboxArrow />
      </AComboboxContent>
    </AComboboxPortal>
  </AComboboxRoot>
</template>

<script setup lang="ts">
import { AComboboxContent, AComboboxInput, AComboboxItem, AComboboxPortal, AComboboxRoot } from 'akar';
import { ref } from 'vue';

const people = [
  { id: 1, name: 'Durward Reynolds' },
  { id: 2, name: 'Kenton Towne' },
  { id: 3, name: 'Therese Wunsch' },
  { id: 4, name: 'Benedict Kessler' },
  { id: 5, name: 'Katelyn Rohan' },
];
const selectedPeople = ref(people[0]);
</script>

<template>
  <AComboboxRoot v-model="selectedPeople">
    <AComboboxInput :display-value="(v) => v.name" />
    <AComboboxPortal>
      <AComboboxContent>
        <AComboboxItem
          v-for="person in people"
          :key="person.id"
          :value="person"
          :disabled="person.unavailable"
        >
          {{ person.name }}
        </AComboboxItem>
      </AComboboxContent>
    </AComboboxPortal>
  </AComboboxRoot>
</template>

<script setup lang="ts">
import { AComboboxRoot } from 'akar';
import { ref } from 'vue';

const people = [
  { id: 1, name: 'Durward Reynolds' },
  { id: 2, name: 'Kenton Towne' },
  { id: 3, name: 'Therese Wunsch' },
  { id: 4, name: 'Benedict Kessler' },
  { id: 5, name: 'Katelyn Rohan' },
];
const selectedPeople = ref([people[0], people[1]]);
</script>

<template>
  <AComboboxRoot
    v-model="selectedPeople"
    multiple
  >
    …
  </AComboboxRoot>
</template>

<script setup lang="ts">
import { AComboboxContent, AComboboxInput, AComboboxItem, AComboboxPortal, AComboboxRoot, useFilter } from 'akar';
import { ref } from 'vue';

const people = [
  { id: 1, name: 'Durward Reynolds' },
  { id: 2, name: 'Kenton Towne' },
  { id: 3, name: 'Therese Wunsch' },
  { id: 4, name: 'Benedict Kessler' },
  { id: 5, name: 'Katelyn Rohan' },
];
const selectedPeople = ref(people[0]);
const searchTerm = ref('');

const { startsWith } = useFilter({ sensitivity: 'base' });
const filteredPeople = computed(() => people.filter((p) => startsWith(p.name, searchTerm.value)));
</script>

<template>
  <AComboboxRoot
    v-model="selectedPeople"
    :ignore-filter="true"
  >
    <AComboboxInput v-model="searchTerm" />
    <AComboboxPortal>
      <AComboboxContent>
        <AComboboxItem
          v-for="person in filteredPeople"
          :key="person.id"
          :value="person"
        >
          {{ person.name }}
        </AComboboxItem>
      </AComboboxContent>
    </AComboboxPortal>
  </AComboboxRoot>
</template>

<script setup lang="ts">
import { AComboboxInput, AComboboxRoot, Label } from 'akar';
</script>

<template>
  <AComboboxRoot v-model="selectedPeople">
    <Label for="person">Person: </Label>
    <AComboboxInput
      id="person"
      placeholder="Select a person"
    />
    …
  </AComboboxRoot>
</template>

<script setup lang="ts">
import {
  AComboboxContent,
  AComboboxInput,
  AComboboxItem,
  AComboboxPortal,
  AComboboxRoot,
} from 'akar';
</script>

<template>
  <AComboboxRoot>
    <AComboboxInput />
    <AComboboxPortal>
      <AComboboxContent>
        <AComboboxItem
          class="AComboboxItem"
          disabled
        >
          …
        </AComboboxItem>
      </AComboboxContent>
    </AComboboxPortal>
  </AComboboxRoot>
</template>

/* styles.css */
.AComboboxItem[data-disabled] {
  color: 'gainsboro';
}

<script setup lang="ts">
import {
  AComboboxContent,
  AComboboxInput,
  AComboboxItem,
  AComboboxPortal,
  AComboboxRoot,
  AComboboxSeparator
} from 'akar';
</script>

<template>
  <AComboboxRoot>
    <AComboboxInput />
    <AComboboxPortal>
      <AComboboxContent>
        <AComboboxItem>…</AComboboxItem>
        <AComboboxItem>…</AComboboxItem>
        <AComboboxItem>…</AComboboxItem>
        <AComboboxSeparator />
        <AComboboxItem>…</AComboboxItem>
        <AComboboxItem>…</AComboboxItem>
        <AComboboxItem>…</AComboboxItem>
      </AComboboxContent>
    </AComboboxPortal>
  </AComboboxRoot>
</template>

<script setup lang="ts">
import {
  AComboboxContent,
  AComboboxGroup,
  AComboboxInput,
  AComboboxItem,
  AComboboxLabel,
  AComboboxPortal,
  AComboboxRoot
} from 'akar';
</script>

<template>
  <AComboboxRoot>
    <AComboboxInput />
    <AComboboxPortal>
      <AComboboxContent>
        <AComboboxGroup>
          <AComboboxLabel>Label</AComboboxLabel>
          <AComboboxItem>…</AComboboxItem>
          <AComboboxItem>…</AComboboxItem>
          <AComboboxItem>…</AComboboxItem>
        </AComboboxGroup>
      </AComboboxContent>
    </AComboboxPortal>
  </AComboboxRoot>
</template>

<script setup lang="ts">
import {
  AComboboxContent,
  AComboboxInput,
  AComboboxItem,
  AComboboxItemIndicator,
  AComboboxPortal,
  AComboboxRoot
} from 'akar';
</script>

<template>
  <AComboboxRoot>
    <AComboboxInput />
    <AComboboxPortal>
      <AComboboxContent>
        <AComboboxItem>
          <img src="…">
          Adolfo Hess
          <AComboboxItemIndicator />
        </AComboboxItem>
        …
      </AComboboxContent>
    </AComboboxPortal>
  </AComboboxRoot>
</template>

<script setup lang="ts">
import { AComboboxContent, AComboboxInput, AComboboxItem, AComboboxPortal, AComboboxRoot } from 'akar';
</script>

<template>
  <AComboboxRoot>
    <AComboboxInput />
    <AComboboxPortal>
      <AComboboxContent>
        <AComboboxItem @select.prevent>
          Item A
        </AComboboxItem>
        …
      </AComboboxContent>
    </AComboboxPortal>
  </AComboboxRoot>
</template>

<script setup lang="ts">
import { AComboboxContent, AComboboxInput, AComboboxItem, AComboboxPortal, AComboboxRoot, AComboboxViewport, AComboboxVirtualizer, useFilter } from 'akar';
import { computed, ref } from 'vue';

const people = Array.from({ length: 100000 }).map((_, id) => ({ id, name: `Person #${id}` }));
const selectedPeople = ref(people[0]);
const searchTerm = ref('');

const { contains } = useFilter({ sensitivity: 'base' });
const filteredPeople = computed(() => people.filter((p) => contains(p.name, searchTerm.value)));
</script>

<template>
  <AComboboxRoot v-model="selectedPeople">
    <AComboboxInput v-model="searchTerm" />
    <AComboboxPortal>
      <AComboboxContent class="max-h-[40vh] overflow-hidden">
        <AComboboxViewport>
          <AComboboxVirtualizer
            v-slot="{ option }"
            :options="filteredPeople"
            :text-content="(x) => x.name"
            :estimate-size="24"
          >
            <AComboboxItem :value="option">
              {{ option.name }}
            </AComboboxItem>
          </AComboboxVirtualizer>
        </AComboboxViewport>
      </AComboboxContent>
    </AComboboxPortal>
  </AComboboxRoot>
</template>

<script setup lang="ts">
import { Command, CommandItem } from './your-command';
</script>

<template>
  <Command>
    <CommandItem value="1">
      Item 1
    </CommandItem>
    <CommandItem value="2">
      Item 2
    </CommandItem>
    <CommandItem value="3">
      Item 3
    </CommandItem>
  </Command>
</template>

// your-command.ts
export { default as Command } from 'Command.vue';
export { default as CommandItem } from 'CommandItem.vue';

<!-- Command.vue -->
<script setup lang="ts">
import type { AComboboxRootEmits, AComboboxRootProps } from 'akar';
import { AComboboxContent, AComboboxInput, AComboboxPortal, AComboboxRoot, useForwardPropsEmits } from 'akar';

const props = defineProps<AComboboxRootProps>();
const emits = defineEmits<AComboboxRootEmits>();

const forward = useForwardPropsEmits(props, emits);
</script>

<template>
  <AComboboxRoot
    v-bind="forward"
    :open="true"
    model-value=""
  >
    <AComboboxInput placeholder="Type a command or search…" />

    <AComboboxPortal>
      <AComboboxContent
        @escape-key-down.prevent
        @focus-outside.prevent
        @interact-outside.prevent
        @pointer-down-outside.prevent
      >
        <AComboboxViewport>
          <slot />
        </AComboboxViewport>
      </AComboboxContent>
    </AComboboxPortal>
  </AComboboxRoot>
</template>

<!-- AComboboxItem.vue -->
<script setup lang="ts">
import type { AComboboxItemProps } from 'akar';
import { AComboboxItem } from 'akar';

const props = defineProps<AComboboxItemProps>();
</script>

<template>
  <AComboboxItem
    v-bind="props"
    @select.prevent
  >
    <slot />
  </AComboboxItem>
</template>