Docs
Learn
v.Latest
Documentation
Select Field
Table of Contents
This is an advanced-use feature, and likely not something you'll need to configure. What you probably want is the content types reference!
The select field represents a select element.
Options
Option | Description |
|---|---|
| The name of the plugin component. Always 'select'. |
| The path to some value in the data being edited. |
| An array of strings or Options to select from. |
| A human readable label for the field. Defaults to the name. (Optional) |
| Description that expands on the purpose of the field or prompts a specific action. (Optional) |
interface SelectField {name: stringcomponent: 'select'label?: stringdescription?: stringoptions: (Option | string)[]}type Option = {value: stringlabel: string}
This interfaces only shows the keys unique to the select field. Visit the Field Config docs for a complete list of options.
Example #1: Select an Author
Below is an example of how a select field could be used to select the author of a blog post
const BlogPostForm = {fields: [{component: 'select',name: 'frontmatter.authors',label: 'Author',description: 'Select an author for this post',options: ['Arundhati Roy', 'Ruth Ozeki', 'Zadie Smith'],},// ...],}
Example #2: Select a Heading Color
Below is an example of how a text field could be used to set the heading color for a blog post.
const BlogPostForm = {fields: [{component: 'color',name: 'heading_color',label: 'Heading Color',description: 'Select the color for the heading',options: [{value: '#ff0000',label: 'Red',},{value: '#000000',label: 'Black',},],},// ...],}