2018-01-03 20:14:15 -02:00
---
2018-08-14 11:33:13 -06:00
label: "Select"
2018-10-01 20:00:57 -04:00
title: select
2018-01-03 20:14:15 -02:00
---
2018-11-29 15:34:04 +01:00
The select widget allows you to pick a string value from a dropdown menu.
2018-01-03 20:14:15 -02:00
- **Name:** `select`
2018-11-29 15:34:04 +01:00
- **UI:** select input
- **Data type:** string or array
2018-01-03 20:14:15 -02:00
- **Options:**
2019-10-24 17:10:23 +02:00
- `default` : default values must be contained in `options` and are ignored otherwise
- string values: accepts a string; defaults to an empty string. Accepts an array of strings and defaults to an empty array with `multiple: true` enabled.
- object with `label` and `value` fields: accepts an object with `label` and `value` field or an array of such objects when `multiple: true` is enable. Defaults to no value
2018-01-03 20:14:15 -02:00
- `options` : (**required**) a list of options for the dropdown menu; can be listed in two ways:
2018-08-14 11:33:13 -06:00
- string values: the label displayed in the dropdown is the value saved in the file
- object with `label` and `value` fields: the label displays in the dropdown; the value is saved in the file
2018-11-29 15:34:04 +01:00
- `multiple` : accepts a boolean; defaults to `false`
2020-01-30 17:53:46 -08:00
- `min` : minimum number of items; ignored if **multiple** is not `true`
- `max` : maximum number of items; ignored if **multiple** is not `true`
2018-01-03 20:14:15 -02:00
- **Example** (options as strings):
2018-08-14 07:37:07 -07:00
```yaml
2018-08-14 11:33:13 -06:00
- label: "Align Content"
name: "align"
widget: "select"
options: ["left", "center", "right"]
2018-08-14 07:37:07 -07:00
```
2018-01-03 20:14:15 -02:00
- **Example** (options as objects):
2018-08-14 07:37:07 -07:00
```yaml
2018-08-14 11:33:13 -06:00
- label: "City"
name: "airport-code"
widget: "select"
2018-08-14 07:37:07 -07:00
options:
2018-08-14 11:33:13 -06:00
- { label: "Chicago", value: "ORD" }
- { label: "Paris", value: "CDG" }
- { label: "Tokyo", value: "HND" }
2018-08-14 07:37:07 -07:00
```
2018-11-29 15:34:04 +01:00
- **Example** (multiple):
```yaml
- label: "Tags"
name: "tags"
widget: "select"
multiple: true
options: ["Design", "UX", "Dev"]
2019-03-20 16:42:04 +01:00
default: ["Design"]
2018-11-29 15:34:04 +01:00
```
2020-01-30 17:53:46 -08:00
- **Example** (min/max):
```yaml
- label: "Tags"
name: "tags"
widget: "select"
multiple: true
min: 1
max: 3
options: ["Design", "UX", "Dev"]
default: ["Design"]
```