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

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

NameDescription
defaultcontent for the form group input. By default it contains an input but you can replace it with another component (e.g select, date-picker)
labelcontent for input label
addonLeftcontent for input left addon. Refer to bootstrap form group inputs
addonRightcontent for input right addon. Refer to bootstrap form group inputs
infoBlockadditional text to be displayed below the input
helpBlockadditional text to be displayed below the info text. By default the input error is displayed as fallback in this slot