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.
Option | Description |
component | The name of the plugin component. Always 'select'. |
name | The path to some value in the data being edited. |
options | An array of strings or Options to select from. |
label | A human readable label for the field. Defaults to the name. (Optional) |
description | 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.
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'],},// ...],}
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',},],},// ...],}
© TinaCMS 2019–2024