Preview Updated 2026-05-10

Variable-aware input

Enhanced Input that auto-detects `{{var}}` template variables and highlights them; unknown variables get a red squiggle.

Basic usage

Implementation: a native input with transparent text underneath, plus an overlay of the same size rendering the highlighted text. Cursor positions stay perfectly aligned. Names listed in variables are treated as “known” and highlighted with accent; others are “unknown” and get a red squiggle.

背景

已知变量：base_url · user_id · auth_token（其余高亮为红色波浪线）

<script setup lang="ts">
import { ref } from 'vue';
import { CfVariableAwareInput } from '@chufix-design/vue';
const value = ref('{{base_url}}/users/{{user_id}}/orders?token={{trace_id}}');
const known = ['base_url', 'user_id', 'auth_token'];
</script>

<template>
  <div style="max-width: 720px;">
    <CfVariableAwareInput v-model="value" :variables="known" placeholder="试试输入 {{base_url}}…" />
    <div style="margin-top: 8px; font-size: 12px; color: var(--fg-3);">
      已知变量：{{ known.join(' · ') }}（其余高亮为红色波浪线）
    </div>
  </div>
</template>

<CfVariableAwareInput value={url} onChange={setUrl} variables={['base_url', 'user_id']} />

Mixed state

A demo combining known (accent highlight) and unknown (red squiggle) variables.

背景

<script setup lang="ts">
import { ref } from 'vue';
import { CfVariableAwareInput } from '@chufix-design/vue';
const v1 = ref('valid only: {{base_url}} / {{user_id}}');
const v2 = ref('mixed: {{base_url}}/v1/{{token}}/users/{{user_id}}');
const v3 = ref('all unknown: {{a}} {{b}} {{c}}');
const known = ['base_url', 'user_id'];
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px; max-width: 720px;">
    <CfVariableAwareInput v-model="v1" :variables="known" />
    <CfVariableAwareInput v-model="v2" :variables="known" />
    <CfVariableAwareInput v-model="v3" :variables="known" />
  </div>
</template>

<CfVariableAwareInput value={v} onChange={setV} variables={known} />

API

Prop	Type	Default	Description
`modelValue` / `value`	`string`	`''`	Input value
`variables`	`string[]`	`[]`	List of known variable names
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`
`variant`	`'outline' \| 'filled'`	`'outline'`
`placeholder` / `disabled` / `error`

Autocomplete popup (typing {{ triggers a candidate list) is planned for v2.