---
title: "String"
description: "Mapping of afz.string() to various input controls and their configuration."
canonical_url: "https://nuxt.mhaibaraai.cn/en/docs/auto-form/string"
---
# String

> Mapping of afz.string() to various input controls and their configuration.

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

## `Input`

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

Basic input field, configure icons, colors and other attributes via `controlProps`:

```vue [AutoFormFieldStringInputExample.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({
  text: afz.string({
    controlProps: {
      icon: 'i-lucide-text'
    }
  })
    .min(3, '至少 3 个字符')
    .max(20, '最多 20 个字符')
    .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>
```

## `Textarea`

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

Multi-line text input, set `type: 'textarea'`, supports auto height adjustment:

```vue [AutoFormFieldStringTextareaExample.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({
  description: afz.string({
    type: 'textarea',
    controlProps: {
      maxrows: 2,
      autoresize: true
    }
  })
    .min(10, '至少 10 个字符')
    .meta({
      label: '文本域',
      placeholder: '请输入多行文本...',
      hint: '这是一个长文本,将自动调整高度,最多 2 行。'
    })
})

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

## `WithClear`

Shows a clear button after input, set [`type: 'withClear'`](https://nuxt.mhaibaraai.cn/docs/components/with-clear):

```vue [AutoFormFieldStringWithClearExample.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({
  search: afz.string({
    type: 'withClear',
    controlProps: {
      icon: 'i-lucide-search'
    }
  })
    .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>
```

## `WithPasswordToggle`

Password input with show/hide toggle, set [`type: 'withPasswordToggle'`](https://nuxt.mhaibaraai.cn/docs/components/with-password-toggle):

```vue [AutoFormFieldStringWithPasswordToggleExample.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({
  password: afz.string({
    type: 'withPasswordToggle'
  })
    .min(8, '密码至少 8 个字符')
    .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>
```

## `WithCopy`

Click the copy button to quickly copy content, set [`type: 'withCopy'`](https://nuxt.mhaibaraai.cn/docs/components/with-copy):

```vue [AutoFormFieldStringWithCopyExample.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({
  apiKey: afz.string({
    type: 'withCopy'
  })
    .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>
```

## `WithCharacterLimit`

Shows remaining character count in real time, set [`type: 'withCharacterLimit'`](https://nuxt.mhaibaraai.cn/docs/components/with-character-limit):

```vue [AutoFormFieldStringWithCharacterLimitExample.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({
  title: afz.string({
    type: 'withCharacterLimit',
    controlProps: {
      maxlength: 50
    }
  })
    .max(50, '最多 50 个字符')
    .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>
```

## `AsPhoneNumberInput`

Enhanced phone number input with mask formatting and country code prefix, set [`type: 'asPhoneNumberInput'`](https://nuxt.mhaibaraai.cn/docs/components/as-phone-number-input):

```vue [AutoFormFieldStringAsPhoneNumberInputExample.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({
  phone: afz.string({
    type: 'asPhoneNumberInput',
    controlProps: {
      dialCode: '+86',
      mask: '### #### ####'
    }
  })
    .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>
```

## `WithFloatingLabel`

Floating label input, label floats up when focused or has content, set [`type: 'withFloatingLabel'`](https://nuxt.mhaibaraai.cn/docs/components/with-floating-label):

```vue [AutoFormFieldStringWithFloatingLabelExample.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({
  email: afz.string({
    type: 'withFloatingLabel',
    controlProps: {
      label: '邮箱地址',
      leadingIcon: 'i-lucide-mail',
      type: 'email'
    }
  })
    .meta({
      label: '',
      hint: '标签会在输入时自动上浮'
    }).optional()
})

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

## `PinInput`

> [!NOTE]
> See: https://ui.nuxt.com/docs/components/pin-input
> 
> PinInput component documentation

Verification code or PIN input, set `type: 'pinInput'`:

```vue [AutoFormFieldStringPinInputExample.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({
  code: afz.string({
    type: 'pinInput',
    controlProps: {
      length: 6,
      mask: false
    }
  })
    .length(6, '请输入 6 位验证码')
    .meta({
      label: '验证码输入',
      hint: '输入 6 位验证码'
    })
})

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

## `InputMenu`

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

Supports both typing and dropdown selection, set `type: 'inputMenu'`:

```vue [AutoFormFieldStringInputMenuExample.vue]
<script lang="ts" setup>
import type { FormSubmitEvent, InputMenuItem } from '@nuxt/ui'
import type { z } from 'zod'

const { afz } = useAutoForm()
const toast = useToast()

const items = [
  { label: 'Apple', value: 'apple' },
  { label: 'Banana', value: 'banana' },
  { label: 'Orange', value: 'orange' },
  { label: 'Grape', value: 'grape' }
] satisfies InputMenuItem[]

const schema = afz.object({
  fruit: afz.string({
    type: 'inputMenu',
    controlProps: {
      items,
      valueKey: 'value'
    }
  })
    .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>
```

## `ColorChooser`

Color picker with visual color selection and formatting, set [`type: 'colorChooser'`](https://nuxt.mhaibaraai.cn/docs/components/color-chooser):

```vue [AutoFormFieldStringColorChooserExample.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({
  color: afz.string({
    type: 'colorChooser',
    controlProps: {
      format: 'rgb'
    }
  })
    .meta({
      label: '颜色选择器',
      placeholder: '选择颜色'
    })
})

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

## Dynamic Type

Explore various types and configuration options for string fields through an interactive example, including: plain input, textarea, password toggle, clear button, copy functionality, character limit, phone mask input, floating label and other enhanced features, as well as style configurations like size, color, and rows.

```vue [AutoFormFieldStringTypeExample.vue]
<script lang="ts" setup>
import type { FormSubmitEvent } from '@nuxt/ui'
import type z from 'zod'

const props = defineProps<{
  type: 'string' | 'textarea' | 'withPasswordToggle' | 'withClear' | 'withCopy' | 'withCharacterLimit' | 'asPhoneNumberInput' | 'withFloatingLabel'
  size: 'sm' | 'xs' | 'md' | 'lg' | 'xl'
  color: 'error' | 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'neutral'
  rows?: number
  maxLength?: number
}>()

const { afz } = useAutoForm()
const toast = useToast()

const resolvedControlProps = computed(() => ({
  leadingIcon: props.type === 'withFloatingLabel' ? undefined : 'i-lucide-type',
  color: props.color,
  rows: props.rows,
  maxLength: props.maxLength,
  label: props.type === 'withFloatingLabel' ? '浮动标签' : undefined,
  dialCode: props.type === 'asPhoneNumberInput' ? '+86' : undefined,
  mask: props.type === 'asPhoneNumberInput' ? '### #### ####' : undefined
}))

const schema = computed(() => (afz.object({
  stringWithType: afz.string({
    type: props.type,
    controlProps: resolvedControlProps.value
  }).meta({
    size: props.size,
    label: props.type === 'withFloatingLabel' ? '' : undefined
  }).optional()
})))

type Schema = z.output<typeof schema.value>

const form = ref<Partial<Schema>>({})

async function onSubmit(event: FormSubmitEvent<Schema>) {
  toast.add({
    title: 'Success',
    color: 'success',
    description: JSON.stringify(event.data, null, 2)
  })
}
</script>

<template>
  <UCard class="w-lg">
    <MAutoForm
      :schema="schema"
      :state="form"
      :submit-button-props="{
        color
      }"
      @submit="onSubmit"
    />
  </UCard>
</template>
```


## Sitemap

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