> For the complete documentation index, see [llms.txt](https://vue-generators.gitbook.io/vue-generators/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://vue-generators.gitbook.io/vue-generators/fields.md).

# 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](/vue-generators/fields/core-fields.md)

These fields are available in the core version of VueFormGenerator.

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

### [Optional fields](/vue-generators/fields/optional_fields.md)

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

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

### [Custom fields](/vue-generators/fields/custom_fields.md)

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