101 lines
3.6 KiB
Plaintext
101 lines
3.6 KiB
Plaintext
---
|
|
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 with `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 | `''`<br />`[]` if multiple is `true` | _Optional_. The default value for the field. Accepts a string |
|
|
| 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
|
|
|
|
```yaml
|
|
name: align
|
|
label: Align Content
|
|
widget: select
|
|
options: ['left', 'center', 'right']
|
|
```
|
|
|
|
Selecting the `center` option, will save the value as:
|
|
|
|
```yaml
|
|
align: center
|
|
```
|
|
|
|
### Options As Numbers
|
|
|
|
```yaml
|
|
name: align
|
|
label: Align Content
|
|
widget: select
|
|
options: [1, 2, 3]
|
|
```
|
|
|
|
Selecting the `2` option, will save the value as:
|
|
|
|
```yaml
|
|
align: 2
|
|
```
|
|
|
|
### Options As Objects
|
|
|
|
```yaml
|
|
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:
|
|
|
|
```yaml
|
|
airport-code: ORD
|
|
```
|
|
|
|
### Multiple
|
|
|
|
```yaml
|
|
name: 'tags'
|
|
label: 'Tags'
|
|
widget: 'select'
|
|
multiple: true
|
|
options: ['Design', 'UX', 'Dev']
|
|
default: ['Design']
|
|
```
|
|
|
|
### Min and Max
|
|
|
|
```yaml
|
|
name: 'tags'
|
|
label: 'Tags'
|
|
widget: 'select'
|
|
multiple: true
|
|
min: 1
|
|
max: 3
|
|
options: ['Design', 'UX', 'Dev']
|
|
default: ['Design']
|
|
```
|