---
title: "Enum"
description: "Configuration methods for afz.enum() and its mapping to selection controls."
canonical_url: "https://nuxt.mhaibaraai.cn/en/docs/auto-form/enum"
---
# Enum

> Configuration methods for afz.enum() and its mapping to selection controls.

> [!NOTE]
> See: https://zod.dev/api#enums
> 
> Use 
> 
> afz.enum()
> 
>  to create an enum field:

> [!TIP]
> 
> Used to override the default control and configure metadata, supporting three configuration approaches:
> 
> Without specifying a control type, uses the default `select` control:
> 
> ```ts
> afz.enum(['a', 'b'], {
>   label: 'Select Option',
>   hint: 'Please choose one'
> })
> ```
> 
> Override the default control via `type`, while keeping the output type unchanged:
> 
> ```ts
> afz.enum(['a', 'b', 'c'], {
>   type: 'radioGroup',  // overrides the default select
>   controlProps: {
>     items: [
>       { label: 'Option A', value: 'a' },
>       { label: 'Option B', value: 'b' }
>     ]
>   }
> })
> // Output type is still: 'a' | 'b' | 'c'
> // but rendered using radioGroup
> ```
> 
> Pass a custom component instance directly:
> 
> ```ts
> import MyEnumControl from './MyEnumControl.vue'
> 
> afz.enum(['a', 'b'], {
>   component: MyEnumControl,
>   controlProps: { /* ... */ }
> })
> ```

> [!TIP]
> 
> Enum value configuration: `controlProps.items` takes the highest priority for rendered content, while the first argument of `enum()` determines the output type — both can be used together.
> 
> - Method 1: Auto-extract enum values, the system automatically converts enum values to `items`:```ts
> const Fruits = ['apple', 'banana', 'orange'] as const
> 
> const schema = afz.object({
>   fruit: afz.enum(Fruits, {
>     type: 'selectMenu',
>     controlProps: {
>       placeholder: 'Select a fruit'
>       // System auto-converts: items: ['apple', 'banana', 'orange']
>     }
>   })
> })
> ```
> - Method 2: Provide items manually, use empty array `[]` as the first argument, fully controlled by `items` for type and rendering:```ts
> const schema = afz.object({
> fruit: afz.enum([], {
>   type: 'selectMenu',
>   controlProps: {
>     valueKey: 'value',
>     items: [
>       { label: 'Apple', value: 'apple' },
>       { label: 'Banana', value: 'banana' }
>     ]
>   }
> })
> })
> ```
> - Method 3: Type + custom display (recommended), use both the enum argument and `items` for type safety with custom display:```ts
> const schema = afz.object({
> gender: afz.enum(['male', 'female', 'other'], {
>   type: 'radioGroup',
>   controlProps: {
>     items: [
>       { label: 'Male', value: 'male' },
>       { label: 'Female', value: 'female' },
>       { label: 'Other', value: 'other' }
>     ]
>   }
> })
> })
> // Output type: 'male' | 'female' | 'other'
> // Display: Male / Female / Other
> ```

## `Select`

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

Native select box, suitable for simple enum values:

```vue [AutoFormFieldEnumSelectExample.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({
  status: afz.enum(['active', 'inactive', 'pending'])
    .default('active')
    .meta({
      label: '选择框',
      placeholder: '请选择状态',
      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>
```

## `SelectMenu`

> [!NOTE]
> See: https://ui.nuxt.com/docs/components/select-menu
> 
> SelectMenu component documentation

Dropdown menu, set `type: 'selectMenu'`, supports search, icons, and grouping:

```vue [AutoFormFieldEnumSelectMenuExample.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({
  fruit: afz.enum([], {
    type: 'selectMenu',
    controlProps: {
      placeholder: '选择水果',
      valueKey: 'value',
      items: [
        { label: '苹果', value: 'apple' },
        { label: '香蕉', value: 'banana' },
        { label: '橙子', value: 'orange' }
      ]
    }
  })
    .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>
```

## `RadioGroup`

> [!NOTE]
> See: https://ui.nuxt.com/docs/components/radio-group
> 
> RadioGroup component documentation

Radio button group, set `type: 'radioGroup'`, suitable for 2-4 options:

```vue [AutoFormFieldEnumRadioGroupExample.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({
  theme: afz.enum([], {
    type: 'radioGroup',
    controlProps: {
      valueKey: 'id',
      items: [
        { label: 'System', description: '跟随系统设置', id: 'system' },
        { label: 'Light', description: '浅色主题', id: 'light' },
        { label: 'Dark', description: '深色主题', id: 'dark' }
      ]
    }
  })
    .default('system')
    .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>
```


## Sitemap

See the full [sitemap](https://nuxt.mhaibaraai.cn/sitemap.md) for all pages.