# 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
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://vue-generators.gitbook.io/vue-generators/develop/fields/core-fields/select.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.