# Custom Fields

If you are not satisfied with the available field, you can create your own custom fields.\
There is only a few steps:

1. These custom fields are like any custom components expect the need to use `VueFormGenerator.abstractField` as a mixins:

   ```markup
   <!-- fieldAwesome.vue -->
   <template>
       <input 
           class="form-control" 
           type="text" 
           v-model="value" 
           :disabled="disabled"
           :maxlength="schema.max"
           :placeholder="schema.placeholder"
           :readonly="schema.readonly" >
   </template>

   <script>
      import { abstractField } from "VueFormGenerator";

      export default {
            mixins: [ abstractField ]
      };
   </script>
   ```
2. Register the new field as a global components. Registered name must validate this RegExp: `(field)[A-Z][A-z]*`.

   ```javascript
    /* main.js */
    import Vue from "vue";
    import VueFormGenerator from "VueFormGenerator";

    // Register my awesome field
    import fieldAwesome from "./fieldAwesome.vue";
    Vue.component("fieldAwesome", fieldAwesome);

    Vue.use(VueFormGenerator);
   ```
3. Last step is to use it in your schema

   ```javascript
   var schema: {
      fields: [{
          type: "awesome",
          label: "Awesome (custom field)",
          model: "userName"
      }]
   };
   ```

If you decide to release your custom field into the wild, please [open a new issue](https://github.com/vue-generators/vue-form-generator/issues) so we can add you to a list on the README.\
Please try to use this naming convention for your custom field : `vfg-field-*`\
Exemple :

* `vfg-field-myfield`
* `vfg-field-calendar`
* `vfg-field-awesome-dropdown`

This way, it will be easier for everyone to find it. Thank you !