Components
<AInput */>
UInput components with custom features
Nuxt Auto Form aims to make form creation as effortless as possible. To achieve this, we provide a set of reusable input components that come with enhanced functionality out of the box.
To read more about customizing
UInput field visit the Input customization docs.Components
| Prop | Source | Notes |
|---|---|---|
<AInputPasswordToggle /> | PasswordToggle.vue | Adds a toggle to show/hide passwords. Based on Nuxt UI's example code |
<AInputWithClear /> | WithClear.vue | Adds a clear button to easily reset input values. Based on Nuxt UI's example code |
Example
<script setup lang="ts">
import { AInputPasswordToggle, AInputWithClear }
from '#components'
import * as z from 'zod'
const schema = z.object({
with_clear: z.string()
.default('Press to clear!')
.meta({
input: {
component: AInputWithClear,
},
}),
password: z.string().meta({
input: {
component: AInputPasswordToggle,
},
}),
})
</script>
<template>
<AutoForm :schema="schema" />
</template>