static-cms/website/content/docs/widget-select.mdx

---
group: Widgets
title: Select
weight: 23
---

- **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](/docs/widgets#common-widget-options).

| Name     | Type                                                                          | Default      | Description                                                                                                                                                                                           |
| -------- | ----------------------------------------------------------------------------- | ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| options  | list of strings<br />\| list of numbers<br />\| object of `label` and `value` |              | <ul><li>`string` or `number` - The dropdown displays the value directly</li><li>object with `label` and `value` fields - The label displays in the dropdown and the value saves in the file</li></ul> |
| default  | string<br />\| number<br />\| list of string<br />\| 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

### Options As Strings

<CodeTabs>
```yaml
name: align
label: Align Content
widget: select
options: ['left', 'center', 'right']
```

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

</CodeTabs>

Selecting the `center` option, will save the value as:

```yaml
align: center
```

### Options As Numbers

<CodeTabs>
```yaml
name: align
label: Align Content
widget: select
options: [1, 2, 3]
```

```js
name: 'align',
label: 'Align Content',
widget: 'select',
options: [1, 2, 3],
```

</CodeTabs>

Selecting the `2` option, will save the value as:

```yaml
align: 2
```

### Options As Objects

<CodeTabs>
```yaml
name: airport-code
label: City
widget: select
options:
  - label: Chicago
    value: ORD
  - label: Paris
    value: CDG
  - label: Tokyo
    value: HND
```

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

</CodeTabs>

Selecting the `Chicago` option, will save the value as:

```yaml
airport-code: ORD
```

### Multiple

<CodeTabs>
```yaml
name: 'tags'
label: 'Tags'
widget: 'select'
multiple: true
options: ['Design', 'UX', 'Dev']
default: ['Design']
```

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

</CodeTabs>

### Min and Max

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

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

</CodeTabs>