---
title: "Boolean 布尔"
description: "afz.boolean() 到复选框、开关与滑动验证控件的映射。"
seo_title: "Boolean Field"
seo_description: "How a Zod boolean field maps to AutoForm controls — checkbox, switch and slide verify."
canonical_url: "https://nuxt.mhaibaraai.cn/docs/auto-form/boolean"
---
# Boolean 布尔

> afz.boolean() 到复选框、开关与滑动验证控件的映射。

> \[\!NOTE\]
> See: https://zod.dev/api#booleans
> 
> 使用 
> 
> afz.boolean()
> 
>  创建布尔值字段：

## `Checkbox`

> \[\!NOTE\]
> See: https://ui.nuxt.com/docs/components/checkbox
> 
> Checkbox 组件文档

默认的复选框控件，适合单个选项的勾选：

```vue [AutoFormFieldBooleanCheckboxExample.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({
  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`

> \[\!NOTE\]
> See: https://ui.nuxt.com/docs/components/switch
> 
> Switch 组件文档

开关控件，设置 `type: 'switch'`，适合功能的启用/禁用：

```vue [AutoFormFieldBooleanSwitchExample.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({
  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`

> \[\!NOTE\]
> See: https://ui.nuxt.com/docs/components/slide-verify
> 
> SlideVerify 组件文档

滑动验证控件，设置 `type: 'slideVerify'`，适合防机器人验证：

```vue [AutoFormFieldBooleanSlideVerifyExample.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({
  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>
```


## Sitemap

See the full [sitemap](/sitemap.md) for all pages.