Slots
Configure specific fields of the form
Sometimes you may want to customize the rendering of specific fields in your form. If all other methods fail you can use slots to achieve this.
| Slot | Type | Description |
|---|---|---|
before-fields | Slot inside <UForm> before the list of <UFormField> | |
after-fields | Slot inside <UForm> after the list of <UFormField> | |
submit | { disabled: boolean } | Slot for customizing the submit button. disabled indicates whether at least one field is invalid. |
<field> | { field: string, state: Ref<Record<string, any> }> | Dynamic input slot for a specific field inside Zod schema. |
<field>-<form field slot> | Dynamic sub-slot for a specific <UFormField> inside the form. |
Dynamic input slots
For each field in your Zod schema, <AutoForm> generates a dynamic slot.
You can use these slots to customize the input components for each field.
MyForm.vue
<script setup lang="ts">
import * as z from 'zod'
const schema = z.object({
custom_bool: z.boolean(),
})
</script>
<template>
<AutoForm :schema="schema">
<template #custom_bool="{ field, state }">
<USelect
v-model="state[field]"
:items="[
{
label: 'False',
value: false,
},
{
label: 'True',
value: true,
},
]"
/>
</template>
</AutoForm>
</template>
And if you want to use a custom component for the submit button, you can do it like this:
MyForm.vue
<template>
<AutoForm :schema="schema">
<template #boolean="{ field, state: stateValue }">
<USelect
v-model="stateValue[field]"
:items="[
{
label: 'False Value',
value: false,
},
{
label: 'True Value',
value: true,
},
]"
/>
</template>
</AutoForm>
</template>
Dynamic UFormField slots
Beyond dynamic input slots, you can override additional field elements such as hint or description.
When the standard FormField configuration does not provide enough flexibility, use slots to customize these elements.
MyForm.vue
<template>
<AutoForm :schema="schema">
<template #text-hint>
This is a hint for the text field.
</template>
</AutoForm>
</template>