On this page

Number field

The number field is a fundamental field that stores a numeric value.

Examples

Here's an example of using the number field in a block:

# blocks/Product.vue

<template>
  <div>
    <span>Price: {{ price }} USD</span>
    ...
  </div>
</template>

<script lang="ts" setup>
import { numberField } from '#pruvious'

defineProps({
  price: numberField({
    required: true,
    decimals: 2,
    min: 0,
    suffix: 'USD',
  }),
})
</script>

Here is another example of how to use it in a collection definition:

# collections/products.ts

import { defineCollection } from '#pruvious'

export default defineCollection({
  name: 'products',
  mode: 'multi',
  fields: {
    price: {
      type: 'number',
      options: {
        required: true,
        decimals: 2,
        min: 0,
        suffix: 'USD',
      },
    },
    // ...
  },
})

Options

You can specify the following options in the number field:

Option	Description
`decimals`	Specifies the maximum number of allowed decimal places for the number. Set to `0` to allow integers only.
`default`	The default field value. By default, this is set to `0` if possible, otherwise it uses the `min` value.
`description`	A brief descriptive text displayed in code comments and in a tooltip at the upper right corner of the field.
`label`	The field label displayed in the UI. By default, it is automatically generated based on the property name assigned to the field. For example, numberOfGuests becomes Number of guests.
`max`	The maximum allowed number.
`min`	The minimum allowed number.
`name`	A string that specifies the `name` for the input control. If not specified, the `name` attribute will be automatically generated.
`placeholder`	Text that appears in the input element when it has no value set.
`prefix`	A short text to be prepended before the input element.
`required`	Specifies whether the field input is mandatory. The requirement check allows the value `0` to be considered as valid.
`step`	The `step` attribute specifies the interval between legal numbers in an `<input>` element. Defaults to `1`.
`suffix`	A short text to be appended after the input element.

Last updated on January 8, 2024 at 19:36

Link

Range