# Fields

A field in the schema defines an input element to a value of model. For example, if you want to edit the `model.selections` value with a select field, you have to create a field with `select` type, what looks like this:

```javascript
{
    type: "select",
    label: "Selections",
    model: "selections"
},
```

Each field has its own options, so be sure to check out their documentations.\
For example, input field need an `inputType` to be specified as well.

```javascript
{
    type: "input",
    inputType: "text",
    label: "Name",
    model: "name"
},
```

## Available fields

### [Core fields](https://vue-generators.gitbook.io/vue-generators/fields/core-fields)

These fields are available in the core version of VueFormGenerator.

* [`checkbox`](https://vue-generators.gitbook.io/vue-generators/fields/core-fields/checkbox) - Checkbox for boolean values
* [`checklist`](https://vue-generators.gitbook.io/vue-generators/fields/core-fields/checklist) - Checkbox list to select multiple values
* [`input`](https://vue-generators.gitbook.io/vue-generators/fields/core-fields/input) - Common input field `NEW!`
* [`label`](https://vue-generators.gitbook.io/vue-generators/fields/core-fields/label) - Static text (e.g. timestamp, creation time...etc)
* [`radios`](https://vue-generators.gitbook.io/vue-generators/fields/core-fields/radios) - Radio buttons to select `NEW!`
* [`select`](https://vue-generators.gitbook.io/vue-generators/fields/core-fields/select) - Select list
* [`submit`](https://vue-generators.gitbook.io/vue-generators/fields/core-fields/submit) - This is a simple submit button
* [`textArea`](https://vue-generators.gitbook.io/vue-generators/fields/core-fields/textarea) - Text area field

### [Optional fields](https://vue-generators.gitbook.io/vue-generators/fields/optional_fields)

These fields are available 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

### [Custom fields](https://vue-generators.gitbook.io/vue-generators/fields/custom_fields)

You can create custom fields too. [Check here how you can do it](https://vue-generators.gitbook.io/vue-generators/fields/custom_fields).