Number

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

Use afz.number() to create a number field:

`InputNumber`

InputNumber component documentation

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

<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`

Slider component documentation

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

<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>

`StarRating`

Star rating component, set type: 'starRating', supports half-star rating and customizable maximum stars:

<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({
  rating: afz.number({
    type: 'starRating',
    controlProps: {
      allowHalf: true,
      max: 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>

String

Mapping of afz.string() to various input controls and their configuration.

Boolean

Mapping of afz.boolean() to checkbox, switch and slide verify controls.