---
title: "Boolean"
description: "Mapping of afz.boolean() to checkbox, switch and slide verify controls."
canonical_url: "https://nuxt.mhaibaraai.cn/en/docs/auto-form/boolean"
---
# Boolean

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

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

## `Checkbox`

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

Default checkbox control, suitable for single option selection:

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

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

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

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

```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](https://nuxt.mhaibaraai.cn/sitemap.md) for all pages.