# Select

Give your users a list of options to choose from. This select field is highly configurable with support for search, multiple choice, and creating new options on the fly.

## Overview

This field is highly configurable, thanks to the fantastic [Vue Select](https://vue-select.org) component. Be sure to explore all the [config options](#options)!

## Data Storage

Select fields will store the _value_ of the chosen option or options. Given this configuration...

``` yaml
handle: select
  field:
    display: Select
    options:
      face: "So's your face."
      know: "I know you are, but what am I?"
      hand: "Talk to the hand."
      beeswax: "Mind your own beeswax."
    placeholder: 'Choose your snappy comeback'
    type: select
```

Your saved data will be:

``` yaml
select: face
```

### Options in blueprint YAML {#options-in-blueprint-yaml}

In the blueprint file, the field’s `options` list is stored in **expanded** form (an ordered sequence of `key` / `value` pairs) so Statamic can preserve option order everywhere content is stored—including SQL-backed databases. If you author blueprints by hand, use that shape or mirror what the Blueprint Editor writes:

```yaml
options:
  - key: face
    value: "So's your face."
  - key: know
    value: "I know you are, but what am I?"
```

That setting applies to the blueprint definition only, not to the entry value (`select: face` above).


## Templating

Select fields return the **value** from your selected option. You can access the label with `select_var:label`.

::tabs

::tab antlers
```antlers
<p id="{{ select }}"> Oh yeah? {{ select:label }}</p>
```

::tab blade
```blade
<p id="{{ $select }}"> Oh yeah? {{ $select['label'] }}</p>
```
::

```html
<p id="face">Oh yeah? So's your face.</p>
```