@mekari/mekari-ui-vue/src/components/InputGroup/stories/content/InputGroupIntroduction.mdx

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

> 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/components/form`

Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs. Must be used as a wrapper also if want to use Form Input component with prefix or suffix icon inside the input. There are also subcomponents from `Input Group` component. The subcomponents are: `Input Group Text`, `Input Group Append`, and `Input Group Prepend`. `Input Group` component and subcomponents are based on [BootstrapVue v2.21.1](https://bootstrap-vue.org/docs/components/input-group). Here is snippet to import the component and its subcomponents:

```js
import {
  MInputGroup,
  MInputGroupAppend,
  MInputGroupPrepend,
  MInputGroupText,
} from '@mekari/mekari-ui-vue';

// For more usage, you can see here:
// https://bootstrap-vue.org/docs/components/input-group
```