---
title: "Number 数字"
description: "afz.number() 到数字输入、滑块与评分控件的映射。"
seo_title: "Number Field"
seo_description: "How a Zod number field maps to AutoForm controls — input number, slider and rating input."
canonical_url: "https://nuxt.mhaibaraai.cn/docs/auto-form/number"
---
# Number 数字

> afz.number() 到数字输入、滑块与评分控件的映射。

> \[\!NOTE\]
> See: https://zod.dev/api#numbers
> 
> 使用 
> 
> afz.number()
> 
>  创建数字字段：

## `InputNumber`

> \[\!NOTE\]
> See: https://ui.nuxt.com/docs/components/input-number
> 
> InputNumber 组件文档

基础数字输入框，支持整数、小数、范围限制等配置：

```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 组件文档

数值滑块，设置 `type: 'slider'`，适合有明确范围的数值选择：

```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` 直接传入 `UInputRating` 组件实例，支持半星粒度与自定义星数：

```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](/sitemap.md) for all pages.