# Optional Fields

These fields are availble in the full version of VueFormGenerator. Some of these also have external dependency.

* [`cleave`](https://vue-generators.gitbook.io/vue-generators/fields/optional_fields/cleave) - Format input text content when you are typing
* [`dateTimePicker`](https://vue-generators.gitbook.io/vue-generators/fields/optional_fields/datetime) - datetime picker with bootstrap-datetimepicker component
* [`googleAddress`](https://vue-generators.gitbook.io/vue-generators/fields/optional_fields/googleaddress) - Format input text content when you are typing
* [`image`](https://vue-generators.gitbook.io/vue-generators/fields/optional_fields/image) - Image select field (URL or upload in base64 string)
* [`masked`](https://vue-generators.gitbook.io/vue-generators/fields/optional_fields/masked) - Masked text input field with maskedinput component
* [`noUiSlider`](https://vue-generators.gitbook.io/vue-generators/fields/optional_fields/nouislider) - Lightweight JavaScript range slider
* [`pikaday`](https://vue-generators.gitbook.io/vue-generators/fields/optional_fields/pikaday) - A refreshing JavaScript Datepicker
* [`selectEx`](https://vue-generators.gitbook.io/vue-generators/fields/optional_fields/selectex) - select list with the bootstrap-select component
* [`slider`](https://vue-generators.gitbook.io/vue-generators/fields/optional_fields/slider) - pretty range slider with ion.rangeSlider component
* [`spectrum`](https://vue-generators.gitbook.io/vue-generators/fields/optional_fields/spectrum) - Color picker with "The No Hassle" Spectrum jQuery Colorpicker component
* [`staticMap`](https://vue-generators.gitbook.io/vue-generators/fields/optional_fields/staticmap) - Display a static map from Google Maps.
* [`switch`](https://vue-generators.gitbook.io/vue-generators/fields/optional_fields/switch) - Switch field (toggle two values (on/off, yes/no, active/inactive)
* [`vueMultiSelect`](https://vue-generators.gitbook.io/vue-generators/fields/optional_fields/vuemultiselect) - Probably the most complete selecting solution for Vue.js

## External dependency

Depending on whether you want to use jQuery, we tried to make the same kind of functionnality available with or without it.\
Here, vanilla mean that a third party librairy is needed and that third party don't use or need jQuery.

| Field type           | jQuery                                                                                       | Vanilla                                                                                                  |
| -------------------- | -------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
| Address autocomplete | N/A                                                                                          | [googleAddress](https://vue-generators.gitbook.io/vue-generators/fields/optional_fields/googleaddress)   |
| Color picker         | [spectrum](https://vue-generators.gitbook.io/vue-generators/fields/optional_fields/spectrum) | N/A                                                                                                      |
| Date picker          | [datetime](https://vue-generators.gitbook.io/vue-generators/fields/optional_fields/datetime) | [pikaday](https://vue-generators.gitbook.io/vue-generators/fields/optional_fields/pikaday)               |
| Masked Input         | [masked](https://vue-generators.gitbook.io/vue-generators/fields/optional_fields/masked)     | [cleave](https://vue-generators.gitbook.io/vue-generators/fields/optional_fields/cleave)                 |
| Multi Selection      | [selectEx](https://vue-generators.gitbook.io/vue-generators/fields/optional_fields/selectex) | [vueMultiSelect](https://vue-generators.gitbook.io/vue-generators/fields/optional_fields/vuemultiselect) |
| Slider               | [slider](https://vue-generators.gitbook.io/vue-generators/fields/optional_fields/slider)     | [noUiSlider](https://vue-generators.gitbook.io/vue-generators/fields/optional_fields/nouislider)         |