.dependabot
.github
.storybook
__mocks__
cypress
dev-test
functions
img
packages
scripts
website
content
blog
docs
widgets
boolean.md
code.md
color.md
date.md
datetime.md
file.md
hidden.md
image.md
list.md
map.md
markdown.md
number.md
object.md
relation.md
select.md
string.md
text.md
add-to-your-site.md
architecture.md
azure-backend.md
backends-overview.md
beta-features.md
bitbucket-backend.md
cloudinary.md
collection-types.md
configuration-options.md
contributor-guide.md
custom-widgets.md
customization.md
deploy-preview-links.md
examples.md
external-oauth-clients.md
gatsby.md
git-gateway-backend.md
github-backend.md
gitlab-backend.md
gridsome.md
hugo.md
intro.md
jekyll.md
middleman.md
netlify-large-media.md
nextjs.md
nuxt.md
open-authoring.md
releases.md
start-with-a-template.md
test-backend.md
uploadcare.md
widgets.md
writing-style-guide.md
pages
.keep
data
src
static
.babelrc
.gitignore
.markdownlint.json
.nvmrc
README.md
gatsby-browser.js
gatsby-config.js
gatsby-node.js
netlify.toml
package.json
site.yml
yarn.lock
.all-contributorsrc
.editorconfig
.eslintrc.js
.gitignore
.nvmrc
.prettierignore
.prettierrc
.stylelintrc
.vale.ini
CHANGELOG.md
CODE_OF_CONDUCT.md
CONTRIBUTING.md
LICENSE
README.md
babel.config.js
cms.png
commitlint.config.js
cypress.json
jest.config.js
lerna.json
netlify.toml
package.json
renovate.json
setupTestFramework.js
tsconfig.json
yarn.lock
1.9 KiB
1.9 KiB
title | label |
---|---|
select | Select |
The select widget allows you to pick a string value from a dropdown menu.
-
Name:
select
-
UI: select input
-
Data type: string or array
-
Options:
-
default
:options
must contain any default values- string values: accepts a string; defaults to an empty string. Accepts an array of strings and defaults to an empty array with
multiple: true
enabled. - object with
label
andvalue
fields: accepts an object withlabel
andvalue
field or an array of such objects whenmultiple: true
is enable. Defaults to no value
- string values: accepts a string; defaults to an empty string. Accepts an array of strings and defaults to an empty array with
-
options
: (required) there are two ways to list of options for the dropdown menu:- string values: the dropdown displays the value directly
- object with
label
andvalue
fields: the label displays in the dropdown; the value saves in the file
-
multiple
: accepts a boolean; defaults tofalse
-
min
: minimum number of items; ignored if multiple isfalse
-
max
: maximum number of items; ignored if multiple isfalse
-
-
Example (options as strings):
- label: "Align Content"
name: "align"
widget: "select"
options: ["left", "center", "right"]
Selecting the center
option, will save the value as:
align: "center"
- Example (options as objects):
- label: "City"
name: "airport-code"
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"
- Example (multiple):
- label: "Tags"
name: "tags"
widget: "select"
multiple: true
options: ["Design", "UX", "Dev"]
default: ["Design"]
- Example (min/max):
- label: "Tags"
name: "tags"
widget: "select"
multiple: true
min: 1
max: 3
options: ["Design", "UX", "Dev"]
default: ["Design"]