Number Input
Basic usage
Model value: 12345
<script setup lang="ts">
import { NumberInput } from '@vuetags/inputs';
import { ref } from 'vue';
const model = ref<string>('12345');
</script>
<template>
<p>
<number-input v-model="model" />
Model value: <span>{{ model }}</span>
</p>
</template><script setup>
import { NumberInput } from '@vuetags/inputs';
import { ref } from 'vue';
const model = ref('12345');
</script>
<template>
<p>
<number-input v-model="model" />
Model value: <span>{{ model }}</span>
</p>
</template>Model
You can use the v-model as you're used to in Vue. Check the official documentation for more information on how to use models.
Props
The NumberInput element allows all default HTML properties and attributes. Apart from those the following properties are added:
filters
Filters can be used to filter out characters on input. This prevents characters from being added when typing, when pasting and when providing an initial value. These are either a single filter or an array of multiple filters. They can be regular expressions and/or custom functions.
When you use multiple filters, they are executed in order in which they are provided.
Type definition
// One or more filter presets, regular expressions and/or custom functions
filters?: Filters | Filters[];
// Combination of presets and/or functions
type Filters = RegExp | TransformFunction;
// Filter function. Needs to return a string.
type TransformFunction = (value: string) => string;A single filter
A single filter can be directly added to the prop. This can be done directly in the template or as a variable.
<script setup lang="ts">
import { NumberInput } from '@vuetags/inputs';
const filter = (value: string) => (value.match(/[^5]/g) || []).join('');
</script>
<template>
<!-- A single regular expression -->
<number-input :filters="/[^7]/g" />
<!-- A single function -->
<number-input :filters="filter" />
</template><script setup>
import { NumberInput } from '@vuetags/inputs';
const filter = (value) => (value.match(/[^5]/g) || []).join('');
</script>
<template>
<!-- A single regular expression -->
<number-input :filters="/[^7]/g" />
<!-- A single function -->
<number-input :filters="filter" />
</template>Multiple filters
Multiple filters can be added as an array. This can be a combination of custom functions and/or regular expressions.
<script setup lang="ts">
import { NumberInput } from '@vuetags/inputs';
const filter = (value: string) => (value.match(/[^5]/g) || []).join('');
</script>
<template>
<number-input :filters="[/[^7]/g, filter]" />
</template><script setup>
import { NumberInput } from '@vuetags/inputs';
const filter = (value) => (value.match(/[^5]/g) || []).join('');
</script>
<template>
<number-input :filters="[/[^7]/g, filter]" />
</template>modifiers
Modifiers can be used to modify values on input. This modifies the value when typing, when pasting and when providing an initial value. These are either a single filter or an array of multiple modifiers. They can be regular expressions and/or custom functions.
When you use multiple modifiers, they are executed in order in which they are provided.
Type definition
// One or more modifier presets and/or custom functions
modifiers?: Modifiers | Modifiers[];
// Combination of presets and/or functions
type Modifiers = TransformFunction;
// Modifier function. Needs to return a string.
type TransformFunction = (value: string) => string;A single modifier
A single modifier can be directly added to the prop. This can be done directly in the template or as a variable.
<script setup lang="ts">
import { NumberInput } from '@vuetags/inputs';
const modifier = (value: string) => (Number(value) * 2)?.toString();
</script>
<template>
<!-- A single function -->
<number-input :modifiers="modifier" />
</template><script setup>
import { NumberInput } from '@vuetags/inputs';
const modifier = (value: string) => (Number(value) * 2)?.toString();
</script>
<template>
<!-- A single function -->
<number-input :modifiers="modifier" />
</template>Multiple modifiers
Multiple modifiers can be added as an array.
<script setup lang="ts">
import { NumberInput } from '@vuetags/inputs';
const double = (value: string) => (Number(value) * 2)?.toString();
const increase = (value: string) => (Number(value) + 1)?.toString();
</script>
<template>
<number-input :modifiers="[double, increase]" />
</template><script setup>
import { NumberInput } from '@vuetags/inputs';
const double = (value) => (Number(value) * 2)?.toString();
const increase = (value) => (Number(value) + 1)?.toString();
</script>
<template>
<number-input :modifiers="[double, increase]" />
</template>validators
Validators are used to validate the user's input. Validation is triggered manually by using the validate function. These are either a single validator or an array of multiple validators. These can be predefined presets and/or custom functions.
Type definition
// One or more validation presets and/or custom functions
validators?: Validation | Validation[];
// Combination of presets and/or functions
type Validation = ValidationPreset | ValidationFunction;
// Available validation presets
type ValidationPreset = 'required';
// Validation function. Needs to return false or a string if validation fails,
// true otherwise
export type ValidationFunction<ModelValue = string> =
(modelValue: ModelValue, ...args: unknown[]) => boolean | string;A single validator
A single validator can be directly added to the prop. This can be done directly in the template or as a variable.
<script setup lang="ts">
import { NumberInput } from '@vuetags/inputs';
</script>
<template>
<!-- A single preset -->
<number-input validators="required" />
<!-- A single function -->
<number-input :validators="(value: string) => value?.length > 5" />
</template><script setup>
import { NumberInput } from '@vuetags/inputs';
</script>
<template>
<!-- A single preset -->
<number-input validators="required" />
<!-- A single function -->
<number-input :validators="(value) => value?.length > 5" />
</template>Multiple validators
Multiple validators can be added as an array. This can be a combination of custom functions and/or presets.
<script setup lang="ts">
import { NumberInput } from '@vuetags/inputs';
const validatorFunction = (value: string) => value?.length > 5;
</script>
<template>
<number-input :validators="['required', validatorFunction]" />
</template><script setup>
import { NumberInput } from '@vuetags/inputs';
const validatorFunction = (value) => value?.length > 5;
</script>
<template>
<number-input :validators="['required', validatorFunction]" />
</template>Available presets
required
The required preset checks if the checkbox is checked. If the checkbox is not checked, it will return 'required' in the validation result.
Emits
The NumberInput element allows the default HTML events that are normally emitted.
Exposed functions
By utilizing Vue template refs you have access to additional functions. These can be programmatically triggered to perform the following actions.
focus
Programmatically trigger focus on the element.
<script setup lang="ts">
import { NumberInput } from '@vuetags/inputs';
import { useTemplateRef } from 'vue';
const element = useTemplateRef<InstanceType<typeof NumberInput>>('number-input');
function focus(): void {
element.value.focus();
}
</script>
<template>
<number-input ref="number-input" />
<button @click="focus">Trigger focus on element</button>
</template><script setup>
import { NumberInput } from '@vuetags/inputs';
import { useTemplateRef } from 'vue';
const element = useTemplateRef('number-input');
function focus() {
element.value.focus();
}
</script>
<template>
<number-input ref="number-input" />
<button @click="focus">Trigger focus on element</button>
</template>blur
Programmatically remove focus from the element.
<script setup lang="ts">
import { NumberInput } from '@vuetags/inputs';
import { useTemplateRef } from 'vue';
const element = useTemplateRef<InstanceType<typeof NumberInput>>('number-input');
function blur(): void {
element.value.blur();
}
</script>
<template>
<number-input ref="number-input" />
<button @click="blur">Remove focus from element</button>
</template><script setup>
import { NumberInput } from '@vuetags/inputs';
import { useTemplateRef } from 'vue';
const element = useTemplateRef('number-input');
function blur() {
element.value.blur();
}
</script>
<template>
<number-input ref="number-input" />
<button @click="blur">Remove focus from element</button>
</template>validate
Programmatically trigger validation of the current value. Runs all the provided validators in order in which they are provided and returns the results.
Return type definition
type ValidationResult = {
valid: boolean;
failed: string[];
};<script setup lang="ts">
import { type ValidationFunction, NumberInput } from '@vuetags/inputs';
import { useTemplateRef } from 'vue';
const element = useTemplateRef<InstanceType<typeof NumberInput>>('number-input');
const validators: ValidationFunction[] = [
(value: string) => (value && value.trim() !== '') || 'This field is required'
];
function validate(): void {
// If the value is empty, it logs:
// { valid: false, failed: ['This field is required'] }
console.log(element.value.validate());
}
</script>
<template>
<number-input ref="number-input" :validators="validators" />
<button @click="validate">Validate value</button>
</template><script setup>
import { NumberInput } from '@vuetags/inputs';
import { useTemplateRef } from 'vue';
const element = useTemplateRef('number-input');
const validators = [
(value) => (value && value.trim() !== '') || 'This field is required'
];
function validate() {
// If the value is empty, it logs:
// { valid: false, failed: ['This field is required'] }
console.log(element.value.validate());
}
</script>
<template>
<number-input ref="number-input" :validators="validators" />
<button @click="validate">Validate value</button>
</template>