---
title: "Number"
description: "Mapping of afz.number() to number input, slider and rating controls."
canonical_url: "https://nuxt.mhaibaraai.cn/en/docs/auto-form/number"
---
# Number

> Mapping of afz.number() to number input, slider and rating controls.

> [!NOTE]
> See: https://zod.dev/api#numbers
> 
> Use 
> 
> afz.number()
> 
>  to create a number field:

## `InputNumber`

> [!NOTE]
> See: https://ui.nuxt.com/docs/components/input-number
> 
> InputNumber component documentation

Basic number input, supports integer, decimal, range limits and other configurations:

```vue [AutoFormFieldNumberInputExample.vue]
<script lang="ts" setup>
import type { FormSubmitEvent } from '@nuxt/ui'
import type { z } from 'zod'

const { afz } = useAutoForm()
const toast = useToast()

const schema = afz.object({
  count: afz.number()
    .int('必须是整数')
    .min(0, '不能小于 0')
    .max(100, '不能大于 100')
    .meta({
      label: '数字输入',
      placeholder: '请输入 0-100 的整数',
      hint: '支持步长、范围限制等配置'
    })
})

async function onSubmit(event: FormSubmitEvent<z.output<typeof schema>>) {
  toast.add({
    title: 'Success',
    color: 'success',
    description: JSON.stringify(event.data, null, 2)
  })
}
</script>

<template>
  <MAutoForm :schema="schema" @submit="onSubmit" />
</template>
```

## `Slider`

> [!NOTE]
> See: https://ui.nuxt.com/docs/components/slider
> 
> Slider component documentation

Numeric slider, set `type: 'slider'`, suitable for selecting values within a defined range:

```vue [AutoFormFieldNumberSliderExample.vue]
<script lang="ts" setup>
import type { FormSubmitEvent } from '@nuxt/ui'
import type { z } from 'zod'

const { afz } = useAutoForm()
const toast = useToast()

const schema = afz.object({
  volume: afz.number({
    type: 'slider',
    controlProps: {
      min: 0,
      max: 100,
      step: 5
    }
  })
    .default(50)
    .meta({
      label: '音量滑块',
      hint: '拖动滑块调整数值，步长为 5'
    })
})

async function onSubmit(event: FormSubmitEvent<z.output<typeof schema>>) {
  toast.add({
    title: 'Success',
    color: 'success',
    description: JSON.stringify(event.data, null, 2)
  })
}
</script>

<template>
  <MAutoForm :schema="schema" @submit="onSubmit" />
</template>
```

## `InputRating` `@nuxt/ui 4.10+`

> [!NOTE]
> See: https://ui.nuxt.com/docs/components/input-rating
> 
> InputRating component documentation

Rating input, pass the `UInputRating` component instance directly via `component`, supports half-star granularity and customizable star count:

```vue [AutoFormFieldNumberInputRatingExample.vue]
<script lang="ts" setup>
import type { FormSubmitEvent } from '@nuxt/ui'
import type { z } from 'zod'
import { UInputRating } from '#components'

const { afz } = useAutoForm()
const toast = useToast()

const schema = afz.object({
  rating: afz.number({
    component: UInputRating,
    controlProps: {
      step: 0.5,
      length: 10
    }
  })
    .min(0, '评分不能小于 0')
    .max(10, '评分不能大于 10')
    .meta({
      label: '评分',
      hint: '支持半星评分'
    })
})

async function onSubmit(event: FormSubmitEvent<z.output<typeof schema>>) {
  toast.add({
    title: 'Success',
    color: 'success',
    description: JSON.stringify(event.data, null, 2)
  })
}
</script>

<template>
  <MAutoForm :schema="schema" @submit="onSubmit" />
</template>
```


## Sitemap

See the full [sitemap](https://nuxt.mhaibaraai.cn/sitemap.md) for all pages.