The select field represents a select element.

TinaCMS Select Field

Options

OptionDescription
componentThe name of the plugin component. Always 'select'.
nameThe path to some value in the data being edited.
optionsAn array of strings or Options to select from.
labelA human readable label for the field. Defaults to the name. (Optional)
descriptionDescription that expands on the purpose of the field or prompts a specific action. (Optional)
interface SelectField {
  name: string
  component: 'select'
  label?: string
  description?: string
  options: (Option | string)[]
}

type Option = {
  value: string
  label: 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',
        },
      ],
    },
    // ...
  ],
}