FormGroup

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.

Label

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.

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

Description

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.

<VInputText label="Who am I" name="information" description="Please add some description about yourself" />

Validation

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 }} 🔫
      </div>
  </template>
</VInputText>

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

Props

Below is a list of props for the VFormGroup component.