InputNumber

Basic Usage

Number Input

num.value === 0

<script setup>
import { InputNumber } from '@8ctavio/vergil/components'
import { useModel } from '@8ctavio/vergil'
const num = useModel(0)
</script>

<template>
    <InputNumber v-model="num" label="Number Input"/>
</template>

Props

All InputText props, except for space-evenly, are available for InputNumber.

Value range

min: number = -Infinity

max: number = Infinity

<InputNumber :min="-10" :max="10"/>

modelValue === 0

Fraction

fraction: boolean | number | [number,number] = true

The fraction prop controls whether to allow fractional digits, and how many digits to allow.

<!-- No fraction -->
<InputNumber :fraction="false"/>

modelValue === 0

<!-- Fixed fractional digits -->
<InputNumber :fraction="2"/>

modelValue === 0

<!-- Range of fractional digits [min,max] -->
<InputNumber :fraction="[2,4]"/>

modelValue === 0

Separate thousands

separator: boolean = true

<InputNumber :separator="false"/>

Step

step: number = 1

<InputNumber :step="0.1"/>

modelValue === 0

Steppers

steppers: boolean

<InputNumber steppers :step="0.1" text-align="center"/>

modelValue === 0

Elements

element	tag	description
input	<input[type="text"]>	InputNumber's underlying input element.

Anatomy

<div.form-field.input-text.input-number/>

<div.form-field-label-wrapper/>

<label.form-field-label/>

<span.form-field-hint/>

<p.form-field-details.form-field-description/>

<div.input-text-outer/>

<Btn.btn/>

<div.input-text-wrapper/>

<Icon.icon/>

<p/>

<input[type="text"]/>

<label/>

<p/>

<Icon.icon/>

<Btn.btn/>

<p.form-field-details.form-field-help/>

API Reference

Props

prop	type	default
value	number | string	0
min	number	-Infinity
max	number	Infinity
fraction	boolean | number | [number,number]	true
separator	boolean	true
step	number	1
steppers	boolean

Configuration options

InputNumber's configuration options options are inherited from InputText.