Preview Updated 2026-05-10

Search input

Input preset with a search icon, clear button, and optional shortcut hint. Pressing Enter fires the search event.

Basic usage

A fixed search icon on the left; when the value is non-empty an × clear button appears on the right and clicking it clears and fires clear. Enter fires search(value).

背景

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

const q = ref('');
function handleSearch(v: string) {
  console.log('search:', v);
}
</script>

<template>
  <div style="max-width: 24rem;">
    <CfSearchInput v-model="q" placeholder="搜索文档…" @search="handleSearch" />
  </div>
</template>

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

const q = ref('');
function handleSearch(v) {
  console.log('search:', v);
}
</script>

<template>
  <div style="max-width: 24rem;">
    <CfSearchInput v-model="q" placeholder="搜索文档…" @search="handleSearch" />
  </div>
</template>

<CfSearchInput
value={q}
onChange={setQ}
placeholder="Search docs…"
onSearch={(v) => console.log(v)}
/>

<CfSearchInput
value={q}
onChange={setQ}
placeholder="Search docs…"
onSearch={(v) => console.log(v)}
/>

Shortcut hint

shortcut mounts a kbd hint at the far right. Often paired with a page-level listener on Ctrl K / ⌘K to focus the search box.

背景

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

const q = ref('');
</script>

<template>
  <div style="max-width: 24rem;">
    <CfSearchInput v-model="q" placeholder="按 Ctrl K 聚焦" shortcut="Ctrl K" />
  </div>
</template>

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

const q = ref('');
</script>

<template>
  <div style="max-width: 24rem;">
    <CfSearchInput v-model="q" placeholder="按 Ctrl K 聚焦" shortcut="Ctrl K" />
  </div>
</template>

<CfSearchInput value={q} onChange={setQ} placeholder="Press Ctrl K to focus" shortcut="Ctrl K" />

<CfSearchInput value={q} onChange={setQ} placeholder="Press Ctrl K to focus" shortcut="Ctrl K" />

Three sizes

size matches Input / Select — sm / md (default) / lg.

背景

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

const a = ref('');
const b = ref('');
const c = ref('');
</script>

<template>
  <div class="demo-stack" style="max-width: 24rem;">
    <CfSearchInput v-model="a" size="sm" placeholder="size = sm" />
    <CfSearchInput v-model="b" size="md" placeholder="size = md" />
    <CfSearchInput v-model="c" size="lg" placeholder="size = lg" />
  </div>
</template>

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

const a = ref('');
const b = ref('');
const c = ref('');
</script>

<template>
  <div class="demo-stack" style="max-width: 24rem;">
    <CfSearchInput v-model="a" size="sm" placeholder="size = sm" />
    <CfSearchInput v-model="b" size="md" placeholder="size = md" />
    <CfSearchInput v-model="c" size="lg" placeholder="size = lg" />
  </div>
</template>

<CfSearchInput value={a} onChange={setA} size="sm" />
<CfSearchInput value={b} onChange={setB} size="md" />
<CfSearchInput value={c} onChange={setC} size="lg" />

<CfSearchInput value={a} onChange={setA} size="sm" />
<CfSearchInput value={b} onChange={setB} size="md" />
<CfSearchInput value={c} onChange={setC} size="lg" />

Disabled

disabled greys the control and ignores clicks.

背景

<script setup lang="ts">
import { CfSearchInput } from '@chufix-design/vue';
</script>

<template>
  <div style="max-width: 24rem;">
    <CfSearchInput model-value="（已禁用）" disabled />
  </div>
</template>

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

<template>
  <div style="max-width: 24rem;">
    <CfSearchInput model-value="（已禁用）" disabled />
  </div>
</template>

<CfSearchInput value="(disabled)" disabled />

<CfSearchInput value="(disabled)" disabled />

API

Prop	Type	Default	Description
`modelValue` (Vue) / `value` (React)	`string`	`''`	Current value
`placeholder`	`string`	`'Search…'`	Placeholder hint
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Height
`disabled`	`boolean`	`false`	Disabled
`clearable`	`boolean`	`true`	Show clear button (when value is non-empty)
`shortcut`	`string`	—	Right-side kbd hint text

Events:

Vue: @update:modelValue, @search, @clear
React: onChange, onSearch, onClear