Inputs

To use the custom form group inputs you need to import the custom made component:

import {FormGroupInput as FgInput} from 'src/components'

Global usage

Vue.component(FgInput)

For local usage

export default {
  components: {
    FgInput
  }
}

Custom form gorup inputs

The form group input component makes use of Vue's InheritAttrs feature which basically let's you extend a component very easily. In this case, form group input will accept any Input attributes as well as Bootstrap input groups through slots.

Simple with v-model

<template>
  <div>
    <fg-input placeholder="Simple input with v-model binding" v-model="inputVal"></fg-input>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        inputVal: ''
      }
    }
  }
</script>

Disabled

<template>
  <div>
    <fg-input placeholder="Disabled input" disabled></fg-input>
  </div>
</template>

<script>
  export default {

  }
</script>

TIP

You can use addonRight and addonLeft slots to fully customize the addons.

With icons

</desc>
<template>
  <div class="row">
      <fg-input class="col-6"
                placeholder="Right icon"
                addon-right-icon="fa fa-search">
      </fg-input>
      <fg-input  class="col-6"
                 placeholder="Left icon"
                 addon-left-icon="fa fa-search">
      </fg-input>
  </div>
</template>
<script>
  export default {

  }
</script>

Different native type

Password

Number

<template>
  <div class="row">
      <fg-input class="col-sm-6 col-12"
                label="Password"
                placeholder="Password"
                value="mypassword"
                type="password">
       </fg-input>
       <fg-input  class="col-sm-6 col-12"
                  label="Number"
                  placeholder="Number"
                  value="23"
                  type="search">
        </fg-input>
  </div>
</template>
<script>
  export default {

  }
</script>

Success and error states

Some error

<template>
  <div class="row">
     <div class="col-12">
       <fg-input input-classes="is-valid" value="Success"></fg-input>
     </div>
     <div class="col-12">
       <fg-input error="Some error" class="has-danger" value="Error"></fg-input>
    </div>
  </div>
</template>
<script>
  export default {}
</script>

Without border

<template>
  <div class="row">
     <div class="col-12">
       <fg-input class="no-border form-control-lg"
                 placeholder="First Name..."
                 addon-left-icon="now-ui-icons users_circle-08">
        </fg-input>
     </div>
     <div class="col-12">
      <fg-input class="no-border form-control-lg"
                placeholder="Last Name..."
                addon-left-icon="now-ui-icons text_caps-small">
      </fg-input>
     </div>
  </div>
</template>
<script>
  export default {}
</script>

Form Group Input Props

TIP

Note You can also use any other html input attributes. They will be passed down to the input inside the component. However, if you replace the default slot which contains the input, those attributes will be no longer sent to the input.

Events

Event Name	Description	Parameters
input	triggers when the binding value changes (default for v-model)	the updated value

TIP

Note You can also use any other input listeners (e.g focus, blur etc).

Slots

Name	Description
default	content for the form group input. By default it contains an input but you can replace it with another component (e.g select, date-picker)
label	content for input label
addonLeft	content for input left addon. Refer to bootstrap form group inputs
addonRight	content for input right addon. Refer to bootstrap form group inputs
infoBlock	additional text to be displayed below the input
helpBlock	additional text to be displayed below the info text. By default the input error is displayed as fallback in this slot

# Inputs

# Custom form gorup inputs

# Simple with v-model

# Disabled

# With icons

# Different native type

# Success and error states

# Without border

# Form Group Input Props

# Events

# Slots