Wrap any form component with a FormField. Used in a Form, it provides validation and error handling.
Use the label prop to set the label for the form control.
<template>
<PFormField label="Email">
<PInput placeholder="Enter your email" />
</PFormField>
</template>
for attribute and the form control are associated with a unique id if not provided.When using the required prop, an asterisk is added next to the label.
<template>
<PFormField label="Email" required>
<PInput placeholder="Enter your email" />
</PFormField>
</template>
Use the description prop to provide additional information below the label.
We'll never share your email with anyone else.
<template>
<PFormField label="Email" description="We'll never share your email with anyone else.">
<PInput placeholder="Enter your email" class="w-full" />
</PFormField>
</template>
Use the hint prop to display a hint message next to the label.
<template>
<PFormField label="Email" hint="Optional">
<PInput placeholder="Enter your email" />
</PFormField>
</template>
Use the help prop to display a help message below the form control.
<template>
<PFormField label="Email" help="Please enter a valid email address.">
<PInput placeholder="Enter your email" class="w-full" />
</PFormField>
</template>
Use the error prop to display an error message below the form control. When used together with the help prop, the error prop takes precedence.
When used inside a Form, this is automatically set when a validation error occurs.
<template>
<PFormField label="Email" error="Please enter a valid email address.">
<PInput placeholder="Enter your email" class="w-full" />
</PFormField>
</template>
Use the size prop to change the size of the FormField, the size is proxied to the form control.
We'll never share your email with anyone else.
<template>
<PFormField
label="Email"
description="We'll never share your email with anyone else."
hint="Optional"
help="Please enter a valid email address."
size="xl"
>
<PInput placeholder="Enter your email" class="w-full" />
</PFormField>
</template>
| Prop | Default | Type |
|---|
| Slot | Type |
|---|
Below is the theme configuration skeleton for the PFormField. Since the component is provided unstyled by default, you will need to fill in these values to apply your own custom look and feel. If you prefer to use our pre-built, opinionated styling, you can instead use our UnoCSS preset, this docs is using it as well.
export default defineAppConfig({
pohon: {
formField: {
slots: {
root: '',
wrapper: '',
labelWrapper: '',
label: '',
container: '',
description: '',
error: '',
hint: '',
help: ''
},
variants: {
size: {
xs: {
root: ''
},
sm: {
root: ''
},
md: {
root: ''
},
lg: {
root: ''
},
xl: {
root: ''
}
},
required: {
true: {
label: ''
}
}
},
compoundVariants: [],
defaultVariants: {
size: 'md'
}
}
}
};
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pohon from 'pohon-ui/vite'
export default defineAppConfig({
pohon: {
formField: {
slots: {
root: '',
wrapper: '',
labelWrapper: '',
label: '',
container: '',
description: '',
error: '',
hint: '',
help: ''
},
variants: {
size: {
xs: {
root: ''
},
sm: {
root: ''
},
md: {
root: ''
},
lg: {
root: ''
},
xl: {
root: ''
}
},
required: {
true: {
label: ''
}
}
},
compoundVariants: [],
defaultVariants: {
size: 'md'
}
}
}
};