Vunix has a component called VFormGroup that wrap all form components (VInput*, VTextArea, VSelect) to add features such as <label>, form validation, description and much more.


The HTML label is used to indicate the label of an input that is very recommanded for accesibility. Vunix inject automatically a <label> tag to the input when the label prop is provided.

Vunix will add a for attribute to the label that will be the same as the id of the input. This will allow to focus the input when the user click on the label.

Here an exemple of how to use the label feature

<VInputText label="Input with label" name="inputWithLabel" placeholder="This is my input with label" />

Required or Optional 🤯

By default when a VInput* component set the required prop to true a star is added after the label. This is also available for VTextArea, VSelect component.

<VInputText required name="requiredInput" label="Required input" placeholder="This input is required" />

Sometimes only few inputs are optional and instead of adding a star to all of your input we do the inverse and show an Optional text after the label. You only need to add the optionalLabel prop.

✨ Thanks to Vincent Bauclin for this idea integrated in the default figma preset
<VInputText optionalLabel name="optionalInput" label="Optional input" placeholder="This input is optional" />

Of course if you set the required prop with the optionalLabel no star will be added to the end of the label.


Sometime we want to add a description to our input to guide the user to fill the good information. To add a description you can provide a text to the description prop or use the description slot to add more complex html content.

If the input has some error injected by the validation the description will be replaced by it.
Please add some description about yourself
<VInputText label="Who am I" name="information" description="Please add some description about yourself" />


The validation error of an input is display in the validation section of the VFormGroup. By default Vunix will get the first error validation message of the input. You can check the Validation section for more information.

If you need to overide the validation section you can do it by using the provided scoped slot validation

<VInputText name="customValidation">
<template #validation="{ validation }">
<div class="text-orange-500">
{{ validation?.field.errorMessage.value }} 🔫

Bottom slot

The VFormGroup provide a bottom slot if you need to add another content to the bottom of the component. For instance the VTextArea component is using it to inject the counter of text length. You can check the code here


Below is a list of props for the VFormGroup component.

nameName of the inputstringYes
inlineHandle inline of form elementbooleanNo
requiredA value is required or must be checked for the form to be submittablebooleanNo
labelInclude label of form elementstringNo
descriptionDescription of the fieldstringNo
optionalLabelDisplay optional label if not requiredbooleanNo