Combobox

Imports

Use the same component slug for React, Vue, and style token lookup. Do not import components from package roots.

import { Combobox, ComboboxInput, ComboboxList, ComboboxItem, ComboboxTrigger } from "@line/abc-def-react/combobox";

<script setup lang="ts">
import { Combobox, ComboboxInput, ComboboxList, ComboboxItem, ComboboxTrigger } from "@line/abc-def-vue/combobox";
</script>

Shadcn references

Compare the corresponding shadcn React and Vue documentation for the same component slug.

Basic usage

import {
  Combobox,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
} from "@line/abc-def-react/combobox";

export function Example() {
  return (
    <Combobox items={["React", "Vue", "CSS"]}>
      <ComboboxInput placeholder="Framework" />
      <ComboboxList>
        <ComboboxItem value="React">React</ComboboxItem>
        <ComboboxItem value="Vue">Vue</ComboboxItem>
        <ComboboxItem value="CSS">CSS</ComboboxItem>
      </ComboboxList>
    </Combobox>
  );
}

<script setup lang="ts">
import {
  Combobox,
  ComboboxEmpty,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
  ComboboxViewport,
} from "@line/abc-def-vue/combobox";

const frameworks = ["React", "Vue", "CSS"];
</script>

<template>
  <Combobox :items="frameworks">
    <ComboboxInput placeholder="Framework" />
    <ComboboxList>
      <ComboboxViewport>
        <ComboboxEmpty>No framework found.</ComboboxEmpty>
        <ComboboxItem
          v-for="framework in frameworks"
          :key="framework"
          :value="framework"
        >
          {{ framework }}
        </ComboboxItem>
      </ComboboxViewport>
    </ComboboxList>
  </Combobox>
</template>

Component tokens

Composition exports

Usage notes

• Use when the option list is long.
• Prefer select for short static option sets.
• Related component tokens use the `combobox` token group in `@line/abc-def-styles/css`.