e8-form-number
Updated on Sep 18, 2025 3 minutes to readA numeric input component with optional masking, formatting, and dynamic suggestion popper.
Overview
e8-form-number allows users to enter and edit numeric values with support for prefixes, non-negative constraints, custom scales, and typehint options.
It supports dynamic suggestion poppers, mobile-friendly negative sign toggling, and flexible formatting based on locale settings.
<e8-form-number
v-model="vars.amount"
label="Amount"
placeholder="Enter a number"
tooltip="Supports optional prefix and formatting"
prefix="$"
horizontal-alignment="right"
:options="[100, 200, 500]"
scale="2"
:show-placeholder-if-zero="true"
></e8-form-number>
🔽 Show more
Properties
| Property | Description | Type | Default |
|---|---|---|---|
| horizontal-alignment | Text alignment inside the input. | E8TextHorizontalAlignment | — |
| label | Label text for the input field; set to false to hide label. | string | boolean | — |
| non-negative | Disallows negative values if set to true. | boolean | false |
| options | Array of numeric values for the suggestion popper. | Array<string | number | { value: string | number }> | — |
| placeholder | Placeholder text displayed in the input. | string | — |
| prefix | String prefix displayed before the numeric value. | string | '' |
| readonly | Makes the input non-editable. | boolean | false |
| scale | Number of decimal digits to display. | number | 0 |
| show-placeholder-if-zero | Shows placeholder when value is zero. | boolean | false |
| size | Size of the control. | E8ElementSizes | 'default' |
| tooltip | Tooltip text displayed below the input. | string | — |
| typehint | Enables typehint popper for numeric suggestions. | boolean | false |
| v-model | Two-way bound numeric value. | number | — |
| visible | Controls component visibility. | boolean | true |