Preview Updated 2026-05-10

Combobox

A typeable variant of Select — typing filters the options, with optional "create new" support.

Basic usage

Pass options and bind the current value via v-model. Type to filter once open; ↑↓ moves the highlight, Enter selects, Esc closes.

背景视口

当前：vue

src/App.vue

<script setup lang="ts">
import { ref } from 'vue';
import { CfCombobox, type ComboboxOption } from '@chufix-design/vue';

const value = ref<string | number | null>('vue');
const options: ComboboxOption[] = [
  { value: 'vue', label: 'Vue 3' },
  { value: 'react', label: 'React 18' },
  { value: 'svelte', label: 'Svelte 5' },
  { value: 'solid', label: 'SolidJS' },
  { value: 'angular', label: 'Angular' },
  { value: 'qwik', label: 'Qwik' },
];
</script>
<template>
  <div style="display:flex; gap: 12px; align-items: flex-start;">
    <CfCombobox v-model="value" :options="options" clearable />
    <span style="font-size: 12px; color: var(--fg-3); align-self: center;">
      当前：{{ value ?? '(无)' }}
    </span>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { CfCombobox } from '@chufix-design/vue';

const value = ref<string | number | null>('vue');
const options= [
  { value: 'vue', label: 'Vue 3' },
  { value: 'react', label: 'React 18' },
  { value: 'svelte', label: 'Svelte 5' },
  { value: 'solid', label: 'SolidJS' },
  { value: 'angular', label: 'Angular' },
  { value: 'qwik', label: 'Qwik' },
];
</script>
<template>
  <div style="display:flex; gap: 12px; align-items: flex-start;">
    <CfCombobox v-model="value" :options="options" clearable />
    <span style="font-size: 12px; color: var(--fg-3); align-self: center;">
      当前：{{ value ?? '(无)' }}
    </span>
  </div>
</template>

import { useState } from 'react';
import { CfCombobox, type ComboboxOption } from '@chufix-design/react';

const options: ComboboxOption[] = [
{ value: 'vue', label: 'Vue 3' },
{ value: 'react', label: 'React 18' },
{ value: 'svelte', label: 'Svelte 5' },
{ value: 'solid', label: 'SolidJS' },
];

export default function Demo() {
const [value, setValue] = useState<string | number | null>('vue');
return <CfCombobox value={value} options={options} clearable onChange={setValue} />;
}

import { useState } from 'react';
import { CfCombobox } from '@chufix-design/react';

const options= [
{ value: 'vue', label: 'Vue 3' },
{ value: 'react', label: 'React 18' },
{ value: 'svelte', label: 'Svelte 5' },
{ value: 'solid', label: 'SolidJS' },
];

export default function Demo() {
const [value, setValue] = useState<string | number | null>('vue');
return <CfCombobox value={value} options={options} clearable onChange={setValue} />;
}

Allow create

When allow-create is on, typing something that doesn’t match shows a “Create ‘xxx’” entry at the bottom of the menu; pressing Enter or clicking it submits the typed text as a new value. @create (Vue) / onCreate (React) fires alongside.

背景视口

src/App.vue

<script setup lang="ts">
import { ref } from 'vue';
import { CfCombobox, type ComboboxOption } from '@chufix-design/vue';

const value = ref<string | number | null>(null);
const options = ref<ComboboxOption[]>([
  { value: 'frontend', label: '前端' },
  { value: 'backend', label: '后端' },
  { value: 'devops', label: '运维' },
]);

function onCreate(v: string) {
  options.value.push({ value: v.toLowerCase(), label: v });
}
</script>
<template>
  <CfCombobox
    v-model="value"
    :options="options"
    allow-create
    clearable
    placeholder="选择或新增分类"
    @create="onCreate"
  />
</template>

<script setup>
import { ref } from 'vue';
import { CfCombobox } from '@chufix-design/vue';

const value = ref<string | number | null>(null);
const options = ref<ComboboxOption[]>([
  { value: 'frontend', label: '前端' },
  { value: 'backend', label: '后端' },
  { value: 'devops', label: '运维' },
]);

function onCreate(v) {
  options.value.push({ value: v.toLowerCase(), label: v });
}
</script>
<template>
  <CfCombobox
    v-model="value"
    :options="options"
    allow-create
    clearable
    placeholder="选择或新增分类"
    @create="onCreate"
  />
</template>

import { useState } from 'react';
import { CfCombobox } from '@chufix-design/react';

export default function Demo() {
  const [value, setValue] = useState<string | number | null>(null);
  const [options, setOptions] = useState<ComboboxOption[]>([
    { value: 'frontend', label: '前端' },
    { value: 'backend', label: '后端' },
    { value: 'devops', label: '运维' },
  ]);

  function onCreate(v: string) {
    options.push({ value: v.toLowerCase(), label: v });
  }
  return (
    <>
      <CfCombobox value={value} onChange={setValue} options={options} allowCreate clearable placeholder="选择或新增分类" onCreate={onCreate} />
    </>
  );
}

import { useState } from 'react';
import { CfCombobox } from '@chufix-design/react';

export default function Demo() {
  const [value, setValue] = useState<string | number | null>(null);
  const [options, setOptions] = useState<ComboboxOption[]>([
    { value: 'frontend', label: '前端' },
    { value: 'backend', label: '后端' },
    { value: 'devops', label: '运维' },
  ]);

  function onCreate(v) {
    options.push({ value: v.toLowerCase(), label: v });
  }
  return (
    <>
      <CfCombobox value={value} onChange={setValue} options={options} allowCreate clearable placeholder="选择或新增分类" onCreate={onCreate} />
    </>
  );
}

Sizes

背景视口

src/App.vue

<script setup lang="ts">
import { ref } from 'vue';
import { CfCombobox, type ComboboxOption } from '@chufix-design/vue';

const a = ref<string | number | null>(null);
const b = ref<string | number | null>(null);
const c = ref<string | number | null>(null);
const options: ComboboxOption[] = [
  { value: 'apple', label: 'Apple' },
  { value: 'banana', label: 'Banana' },
  { value: 'cherry', label: 'Cherry' },
];
</script>
<template>
  <div style="display: flex; flex-direction: column; gap: 8px; max-width: 320px;">
    <CfCombobox v-model="a" :options="options" size="sm" placeholder="sm" />
    <CfCombobox v-model="b" :options="options" size="md" placeholder="md" />
    <CfCombobox v-model="c" :options="options" size="lg" placeholder="lg" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { CfCombobox } from '@chufix-design/vue';

const a = ref<string | number | null>(null);
const b = ref<string | number | null>(null);
const c = ref<string | number | null>(null);
const options= [
  { value: 'apple', label: 'Apple' },
  { value: 'banana', label: 'Banana' },
  { value: 'cherry', label: 'Cherry' },
];
</script>
<template>
  <div style="display: flex; flex-direction: column; gap: 8px; max-width: 320px;">
    <CfCombobox v-model="a" :options="options" size="sm" placeholder="sm" />
    <CfCombobox v-model="b" :options="options" size="md" placeholder="md" />
    <CfCombobox v-model="c" :options="options" size="lg" placeholder="lg" />
  </div>
</template>

import { useState } from 'react';
import { CfCombobox } from '@chufix-design/react';

export default function Demo() {
  const [a, setA] = useState<string | number | null>(null);
  const [b, setB] = useState<string | number | null>(null);
  const [c, setC] = useState<string | number | null>(null);
  const options: ComboboxOption[] = [
    { value: 'apple', label: 'Apple' },
    { value: 'banana', label: 'Banana' },
    { value: 'cherry', label: 'Cherry' },
  ];
  return (
    <>
      <div style={{ display: "flex", flexDirection: "column", gap: 8, maxWidth: 320 }}>
          <CfCombobox value={a} onChange={setA} options={options} size="sm" placeholder="sm" />
          <CfCombobox value={b} onChange={setB} options={options} size="md" placeholder="md" />
          <CfCombobox value={c} onChange={setC} options={options} size="lg" placeholder="lg" />
        </div>
    </>
  );
}

import { useState } from 'react';
import { CfCombobox } from '@chufix-design/react';

export default function Demo() {
  const [a, setA] = useState<string | number | null>(null);
  const [b, setB] = useState<string | number | null>(null);
  const [c, setC] = useState<string | number | null>(null);
  const options= [
    { value: 'apple', label: 'Apple' },
    { value: 'banana', label: 'Banana' },
    { value: 'cherry', label: 'Cherry' },
  ];
  return (
    <>
      <div style={{ display: "flex", flexDirection: "column", gap: 8, maxWidth: 320 }}>
          <CfCombobox value={a} onChange={setA} options={options} size="sm" placeholder="sm" />
          <CfCombobox value={b} onChange={setB} options={options} size="md" placeholder="md" />
          <CfCombobox value={c} onChange={setC} options={options} size="lg" placeholder="lg" />
        </div>
    </>
  );
}

API

Prop	Type	Default	Description
`modelValue` (Vue) / `value` (React)	`string \| number \| null`	`null`	Current value
`options`	`ComboboxOption[]`	`[]`	List of `{ value, label, disabled? }`
`placeholder`	`string`	`'Select or type'`	Placeholder text
`variant`	`'outline' \| 'filled' \| 'ghost'`	`'outline'`	Visual mode
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size
`disabled`	`boolean`	`false`	Disabled
`clearable`	`boolean`	`false`	Show a clear button
`error`	`boolean`	`false`	Error state
`allowCreate`	`boolean`	`false`	Whether typed input can be submitted as a new value
`filter`	`(query, option) => boolean`	Default matches label and value substrings	Custom filter function
`emptyText`	`string`	`'No matches'`	Placeholder when there are no results

Events: update:modelValue / change / create (React: onChange / onCreate).