Enum

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

Use afz.enum() to create an enum field:

Used to override the default control and configure metadata, supporting three configuration approaches:

Without specifying a control type, uses the default select control:

afz.enum(['a', 'b'], {
  label: 'Select Option',
  hint: 'Please choose one'
})

Override the default control via type, while keeping the output type unchanged:

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:

import MyEnumControl from './MyEnumControl.vue'

afz.enum(['a', 'b'], {
  component: MyEnumControl,
  controlProps: { /* ... */ }
})

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:

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:

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:

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`

Select component documentation

Native select box, suitable for simple enum values:

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

SelectMenu component documentation

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

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

RadioGroup component documentation

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

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

Date & Time

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

Array

Element definition, metadata override and mapping of afz.array() to multi-value controls.