> 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/develop/fields/core-fields/select.md).

# select

This is a HTML `select` & `option` selection list field. You can only select one item.

## Special properties of field

| Property        | Default | Accepted values       | Description                                                                                                                                                              |
| --------------- | ------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `values`        | *none*  | `Array` or `Function` | List of items. It can be an array with items, or a `Function`, what is resulted an array. The item will be a `String` or an object with an `id` and a `name` properties. |
| `selectOptions` | {}      | `Object`              | Settings to select component. See details below.                                                                                                                         |

### `selectOptions`

| Property               | Default              | Accepted values | Description                                                                                    |
| ---------------------- | -------------------- | --------------- | ---------------------------------------------------------------------------------------------- |
| `noneSelectedText`     | `<Nothing selected>` | `String`        | Change the text for the no selection option.                                                   |
| `hideNoneSelectedText` | `false`              | `Boolean`       | Hide the noneSelected item                                                                     |
| `value`                | `id`                 | `String`        | Used to select any properties from object in `values` to use as actual value to save in model. |
| `name`                 | `name`               | `String`        | Used to select any properties from object in `name` to use as display in the list              |

## Usage

#### Select field with array of strings:

```javascript
{
    type: "select",
    label: "Type",
    model: "type",
    values: [
        "Personal",
        "Business"
    ]
}
```

If you select the first item, the `value` will be `"Personal"` in the model.

### Select field with object items:

```javascript
{
    type: "select",
    label: "Language",
    model: "lang",
    required: true,
    values: function() {
      return [
        { id: "en-GB", name: "English (GB)" },
        { id: "en-US", name: "English (US)" },
        { id: "de", name: "German" },
        { id: "it", name: "Italic" },
        { id: "fr", name: "French" }
      ]
    },
    default: "en-US",
    validator: validators.required
}
```

If you select the second item, the `value` will be `"en-US"` in the model.

### Creating an \ with Select field:

```javascript
{
    type: "select",
    label: "Choose the fastest",
    model: "the-fastest",
    required: true,
    values: [
        { name: "Marc Marquez", id: "93", group: "MotoGP" },
        { name: "Valentino Rossi", id: "46", group: "MotoGP" },
        { name: "Lewis Hamilton", id: "44", group: "Formula 1" },
        { name: "Sebastian Vettel", id: "5", group: "Formula 1" }
    ],
    validator: validators.required
}
```