Number

The number input type is used for numeric input fields. It provides a specialized input for numbers with built-in browser validation and supports various validation rules for numeric constraints.

<template>
    <VsInputNumber v-model="numberValue" />
</template>
<script setup>
import { ref } from 'vue'
import { VsInputNumber } from '@opengis/form'

const numberValue = ref('');
</script>

Basic Number Input

<VsInputNumber v-model="numberValue" />

{
  name: 'age',
  type: 'Number',
  label: 'Age'
}

Properties

Required Properties

• name (string): Unique identifier for the field
• type (string): Must be 'number'
• label (string): Display label for the field

Optional Properties

• placeholder (string): Hint text shown when field is empty
• disabled (boolean): Whether the field is disabled
• layout (string): Layout type (default, horizontal)
• rules (array): Validation rules for the field

interface

interface NumberProps {
  modelValue?: number | null;
  placeholder?: string;
  style?: object;
}

interface NumberSchemaItem {
  name: string;
  type: 'number';
  label: string;
  placeholder?: string;
  disabled?: boolean;
  rules?: (string | object)[];
  conditions?: Conditions | Conditions[];
}

Best Practices

1. Use appropriate placeholders that indicate the expected format or units
2. Set reasonable validation ranges for your specific use case
3. Consider decimal precision when dealing with currency or measurements
4. Use descriptive labels that include units when relevant
5. Validate for integer-only fields when whole numbers are required
6. Set minimum and maximum bounds to prevent unrealistic values
7. Consider negative values - allow them only when appropriate
8. Use custom validation for complex numeric constraints