Select

Name: select
UI: Select input
Data type: string, number, list of strings or list of numbers

The select widget allows you to pick a string value from a dropdown menu.

Widget Options

For common options, see Common widget options.

Name	Type	Default	Description
options	list of strings \| list of numbers \| object of `label` and `value`		`string` or `number` – The dropdown displays the value directlyobject with `label` and `value` fields – The label displays in the dropdown and the value saves in the file
default	string \| number \| list of string \| list of number	`''` or `[]`	Optional. The default value for the field. Accepts a string. Defaults to an empty array if `multiple` is `true`
multiple	boolean	`false`	Optional. Allow multiple values/options to be selected
min	number		Optional. Minimum number of items. Ignored if multiple is `false`
max	number		Optional. Maximum number of items; ignored if multiple is `false`

Examples

name: align
label: Align Content
widget: select
options: ['left', 'center', 'right']

name: 'align',
label: 'Align Content',
widget: 'select',
options: ['left', 'center', 'right'],

Selecting the center option, will save the value as:

align: center

Options As Objects

YAML
JavaScript

name: airport-code
label: City
widget: select
options:
  - label: Chicago
    value: ORD
  - label: Paris
    value: CDG
  - label: Tokyo
    value: HND

name: 'airport-code',
label: 'City',
widget: 'select',
options: [
  {
    label: 'Chicago',
    value: 'ORD'
  },
  {
    label: 'Paris',
    value: 'CDG'
  },
  {
    label: 'Tokyo',
    value: 'HND'
  },
],

Selecting the Chicago option, will save the value as:

airport-code: ORD

Multiple

YAML
JavaScript

name: 'tags'
label: 'Tags'
widget: 'select'
multiple: true
options: ['Design', 'UX', 'Dev']
default: ['Design']

name: 'tags',
label: 'Tags',
widget: 'select',
multiple: true,
options: ['Design', 'UX', 'Dev'],
default: ['Design'],

Min and Max

YAML
JavaScript

name: 'tags'
label: 'Tags'
widget: 'select'
multiple: true
min: 1
max: 3
options: ['Design', 'UX', 'Dev']
default: ['Design']

name: 'tags',
label: 'Tags',
widget: 'select',
multiple: true,
min: 1,
max: 3,
options: ['Design', 'UX', 'Dev'],
default: ['Design'],