Preview Updated 2026-05-10

Number input

Numeric input with +/− stepper buttons, min/max/step constraints, arrow-key stepping, and auto clamp.

Basic usage

Bind to number | null — null represents empty, distinct from “not filled in”. min / max constrain the value, with auto-clamp on blur.

背景

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

const value = ref<number | null>(10);
</script>

<template>
  <div style="max-width: 16rem;">
    <CfNumberInput v-model="value" :min="0" :max="100" />
  </div>
</template>

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

const value = ref<number | null>(10);
</script>

<template>
  <div style="max-width: 16rem;">
    <CfNumberInput v-model="value" :min="0" :max="100" />
  </div>
</template>

<CfNumberInput value={value} onChange={setValue} min={0} max={100} />

<CfNumberInput value={value} onChange={setValue} min={0} max={100} />

Step and precision

step is the unit per button click / keystroke; a fractional step infers precision automatically (step=0.05 → 2 decimal places). You can also pass precision explicitly to force the number of digits. When the value is null, the placeholder text is shown.

背景

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

const ratio = ref<number | null>(0.25);
const price = ref<number | null>(99.9);
const optional = ref<number | null>(null);
</script>

<template>
  <div class="demo-stack">
    <div class="demo-row" style="gap: 1rem;">
      <CfNumberInput v-model="ratio" :step="0.05" :min="0" :max="1" />
      <CfNumberInput v-model="price" :step="0.1" :precision="2" />
      <CfNumberInput v-model="optional" placeholder="留空表示不限" />
    </div>
  </div>
</template>

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

const ratio = ref<number | null>(0.25);
const price = ref<number | null>(99.9);
const optional = ref<number | null>(null);
</script>

<template>
  <div class="demo-stack">
    <div class="demo-row" style="gap: 1rem;">
      <CfNumberInput v-model="ratio" :step="0.05" :min="0" :max="1" />
      <CfNumberInput v-model="price" :step="0.1" :precision="2" />
      <CfNumberInput v-model="optional" placeholder="留空表示不限" />
    </div>
  </div>
</template>

<CfNumberInput value={ratio} onChange={setRatio} step={0.05} min={0} max={1} />
<CfNumberInput value={price} onChange={setPrice} step={0.1} precision={2} />
<CfNumberInput value={optional} onChange={setOptional} placeholder="Leave blank for unlimited" />

<CfNumberInput value={ratio} onChange={setRatio} step={0.05} min={0} max={1} />
<CfNumberInput value={price} onChange={setPrice} step={0.1} precision={2} />
<CfNumberInput value={optional} onChange={setOptional} placeholder="Leave blank for unlimited" />

Three sizes

size controls control height, consistent with Input / Select — sm compact, md default, lg large for touch.

背景

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

const a = ref<number | null>(50);
const b = ref<number | null>(50);
const c = ref<number | null>(50);
</script>

<template>
  <div class="demo-row" style="gap: 1rem;">
    <CfNumberInput v-model="a" size="sm" />
    <CfNumberInput v-model="b" size="md" />
    <CfNumberInput v-model="c" size="lg" />
  </div>
</template>

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

const a = ref<number | null>(50);
const b = ref<number | null>(50);
const c = ref<number | null>(50);
</script>

<template>
  <div class="demo-row" style="gap: 1rem;">
    <CfNumberInput v-model="a" size="sm" />
    <CfNumberInput v-model="b" size="md" />
    <CfNumberInput v-model="c" size="lg" />
  </div>
</template>

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

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

Hide steppers / disabled

hideSteppers hides the right-side +/− buttons but keeps keyboard stepping — cleaner inside tables or compact forms. disabled blocks all interaction.

背景

默认（带 +/− 按钮）

hideSteppers

disabled

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

const a = ref<number | null>(42);
const b = ref<number | null>(42);
</script>

<template>
  <div class="demo-stack">
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">默认（带 +/− 按钮）</div>
      <CfNumberInput v-model="a" />
    </div>
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">hideSteppers</div>
      <CfNumberInput v-model="b" hide-steppers />
    </div>
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">disabled</div>
      <CfNumberInput :model-value="42" disabled />
    </div>
  </div>
</template>

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

const a = ref<number | null>(42);
const b = ref<number | null>(42);
</script>

<template>
  <div class="demo-stack">
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">默认（带 +/− 按钮）</div>
      <CfNumberInput v-model="a" />
    </div>
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">hideSteppers</div>
      <CfNumberInput v-model="b" hide-steppers />
    </div>
    <div>
      <div style="font-size: 12px; color: var(--fg-3); margin-bottom: 4px;">disabled</div>
      <CfNumberInput :model-value="42" disabled />
    </div>
  </div>
</template>

<CfNumberInput value={a} onChange={setA} />
<CfNumberInput value={b} onChange={setB} hideSteppers />
<CfNumberInput value={42} disabled />

<CfNumberInput value={a} onChange={setA} />
<CfNumberInput value={b} onChange={setB} hideSteppers />
<CfNumberInput value={42} disabled />

Keyboard interaction

↑ / ↓ — step by step
Enter — commit and clamp
Blur — auto-clamp to [min, max]; out-of-range input is corrected
Non-numeric characters are blocked (keeps - / . as signs)

API

Prop	Type	Default	Description
`modelValue` (Vue) / `value` (React)	`number \| null`	`null`	Current value; `null` is empty
`min`	`number`	—	Minimum
`max`	`number`	—	Maximum
`step`	`number`	`1`	Step
`precision`	`number`	inferred	Decimal places; inferred from step when omitted
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Height
`hideSteppers`	`boolean`	`false`	Hide +/− buttons (keyboard stepping still works)
`placeholder`	`string`	`—`	Placeholder text (shown when value is `null`)
`disabled`	`boolean`	`false`	Disabled