> Available since version: `1.0.0`

> Styling from Mekari UI Toolkit that must be used on this component are (or with its `.scss`):
> - `./css/components/reboot-bootstrap`
> - `./css/utilities/utilities`
> - `./css/components/mekari-ui-form`

The `Form Group` component is the easiest way to add some structure to forms. Its purpose is to pair form controls with a legend or label, and to provide help text and invalid/valid feedback text, as well as visual (color) contextual state feedback. This form group component has a sub-component called: `Form Group Counter Label` to show the counter of the input. To use the components, you can import the components like this:

```js
import { MFormGroup, MFormGroupCounterLabel } from from `@mekari/mekari-ui-vue`;
```

The element inside `Form Group` component can be anything. `Form Group` has default slot which is a scoped-slot. There are props that can be used in default slot:
- `setInputLength`: This is a method that will read the input. This input will set the input length on the Form Group component.
- `inputRemaining`: This props has a value of remaining character that can be added to input element if you set the props `maxInputLength` to > 0. If the value of `maxInputLength` set to 0, or is using its default value, this props will just count the character inside the input.
- `limitInput`: formatter for the input so it will just show the value with length of `maxInputLength`. If `maxInputLength` is set to > 0, it will just show input with character length of `maxInputLength`.  If the value of `maxInputLength` set to 0, or is using its default value, the formatter will return the value without any modification.
Here is example of default slot:
```js
<template v-slot="{ setInputLength, inputRemaining, limitInput }">
  <m-form-group-counter-label :label="inputRemaining" />
  <m-label>Label</m-label>
  <m-form-input @input="setInputLength($event)" :formatter="limitInput" />
</template>
```