Boolean

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

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

`Checkbox`

Checkbox component documentation

Default checkbox control, suitable for single option selection:

<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({
  agree: afz.boolean({
    controlProps: {
      label: '我已阅读并同意服务条款'
    }
  })
    .refine(val => val === true, '必须同意条款才能继续')
    .meta({
      label: '复选框'
    })
})

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>

`Switch`

Switch component documentation

Toggle switch, set type: 'switch', suitable for enabling/disabling features:

<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({
  enabled: afz.boolean({
    type: 'switch'
  })
    .default(true)
    .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>

`SlideVerify`

SlideVerify component documentation

Slide verification control, set type: 'slideVerify', suitable for bot prevention:

<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({
  slideVerify: afz.boolean({
    type: 'slideVerify',
    controlProps: { size: 'lg' }
  })
    .meta({ 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>

Number

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

Date & Time

Mapping of afz.calendarDate() and others to date picker, input and ISO string controls.