.github
cypress
dev-test
img
packages
scripts
website
content
blog
docs
widgets
boolean.md
date.md
datetime.md
file.md
hidden.md
image.md
index.md
list.md
markdown.md
number.md
object.md
relation.md
select.md
string.md
text.md
add-to-your-site.md
architecture.md
authentication-backends.md
beta-features.md
collection-types.md
configuration-options.md
contributor-guide.md
custom-widgets.md
customization.md
examples.md
intro.md
start-with-a-template.md
update-the-cms-version.md
pages
.keep
data
src
static
.gitignore
.nvmrc
.stylelintrc
README.md
gatsby-browser.js
gatsby-config.js
gatsby-node.js
package.json
postcss.config.js
yarn.lock
.all-contributorsrc
.editorconfig
.eslintrc
.gitignore
.nvmrc
.prettierignore
.prettierrc
.stylelintrc
.travis.yml
CHANGELOG.md
CODE_OF_CONDUCT.md
CONTRIBUTING.md
LICENSE
README.md
babel.config.js
custom-preprocessor.js
cypress.json
jest.config.js
lerna.json
package.json
setupTestFramework.js
yarn.lock
ebc2471c6b
Prettier formatting our markdown files is causing bugs because of the differences between Gatsby's parser and Prettier's. Also, Prettier formats the inline code-blocks containing example CMS configs, but the formatting it uses doesn't really make much sense or match the suggested CMS config style. It doesn't actually make much sense to format the docs anyway, since we use the CMS itself to edit/generate them.
34 lines
1018 B
Markdown
34 lines
1018 B
Markdown
---
|
|
label: "Select"
|
|
target: select
|
|
---
|
|
|
|
The select widget allows you to pick a single string value from a dropdown menu.
|
|
|
|
- **Name:** `select`
|
|
- **UI:** HTML select input
|
|
- **Data type:** string
|
|
- **Options:**
|
|
- `default`: accepts a string; defaults to an empty string
|
|
- `options`: (**required**) a list of options for the dropdown menu; can be listed in two ways:
|
|
- 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
|
|
- **Example** (options as strings):
|
|
```yaml
|
|
- label: "Align Content"
|
|
name: "align"
|
|
widget: "select"
|
|
options: ["left", "center", "right"]
|
|
```
|
|
- **Example** (options as objects):
|
|
```yaml
|
|
- label: "City"
|
|
name: "airport-code"
|
|
widget: "select"
|
|
options:
|
|
- { label: "Chicago", value: "ORD" }
|
|
- { label: "Paris", value: "CDG" }
|
|
- { label: "Tokyo", value: "HND" }
|
|
```
|
|
|