170 lines
4.2 KiB
Plaintext
170 lines
4.2 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 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>
|