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（其余高亮为红色波浪线）

src/App.vue vue

<CfVariableAwareInput v-model="url" :variables="['base_url', 'user_id']" />

src/App.tsx tsx

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

Mixed state

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

src/App.vue vue

<CfVariableAwareInput v-model="v" :variables="known" />

src/App.tsx tsx

<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.