@mekari/mekari-ui-vue
Version:
--- General web components in Mekari. The components are made using vue.js as its framework. Styling of components on Mekari UI Vue uses [Mekari UI Toolkit](https://bitbucket.org/mid-kelola-indonesia/mekari-ui-toolkit/src/master/). Don't forget to import
27 lines (21 loc) • 1.96 kB
text/mdx
> 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-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>
```