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