Number Field
Preserve exact decimal input while validating or evaluating text drafts.
Usage
Exact decimal
Enter 0.1 as decimal text and preserve it without binary floating-point coercion.
Committed value0.1
<!-- Number Field / Exact Decimal -->
<script setup lang="ts">
import { NumberField } from '@sectile/vue/number-field'
</script>
<template>
<label>
Amount
<NumberField default-value="0.1" />
</label>
</template>Calculator
Enter 50-20% and commit the calculated result as 40.
Committed value50
<!-- Number Field / Calculator -->
<script setup lang="ts">
import { NumberField } from '@sectile/vue/number-field'
import { createCalculatorExpression } from '@sectile/core/number-field'
const policies = {
evaluator: createCalculatorExpression({
precision: 12,
rounding: 'half-even',
}),
}
</script>
<template>
<label>
Amount
<NumberField default-value="50" :policies="policies" />
</label>
</template>Exponent
Enter 2^3^2 and evaluate exponentiation from right to left.
Committed value2
<!-- Number Field / Exponent -->
<script setup lang="ts">
import { NumberField } from '@sectile/vue/number-field'
import { createCalculatorExpression } from '@sectile/core/number-field'
const policies = {
evaluator: createCalculatorExpression({
precision: 12,
rounding: 'half-even',
}),
}
</script>
<template>
<label>
Amount
<NumberField default-value="2" :policies="policies" />
</label>
</template>Bounded
Reject values outside the configured minimum and maximum.
Committed value40.25
<!-- Number Field / Bounded -->
<script setup lang="ts">
import { NumberField } from '@sectile/vue/number-field'
const policies = { min: '0', max: '100', }
</script>
<template>
<label>
Amount
<NumberField default-value="40.25" :policies="policies" />
</label>
</template>API
Vue package: @sectile/vue/number-field
NumberField
Props
NumberFieldProps
defaultValueInitial value used when the component owns its state.
disabledWhether interaction is unavailable.
labelAccessible name announced for the control.
modelValueCurrent value when state is controlled by the parent.
nativeWhether to use the browser native date or time input UI.
policiesBehavior policies that customize validation, movement, or selection.
readonlyWhether the value can be inspected but not changed.
requiredWhether the control must contain a valid value before submission.
Parts
Shared scope: [data-scope="number-field"]. Combine it with a part selector to keep styles local to this component.
| Part | Selector | Role | Extra attributes |
|---|---|---|---|
input | [data-part="input"] | Accepts the editable value or draft. | — |
Keyboard interaction
| Key | Behavior |
|---|---|
| Standard editing keys | Edit and select text with the host input conventions. |
| Tab | Commit focus movement without replacing native text behavior. |
Accessibility
The labeled input preserves native editing and exposes invalid, disabled, and readonly state.