Select Field

The select field represents a select element.

TinaCMS Select Field


Below is an example of how a select field could be defined in a form. Read more on passing in form field options) for Gatsby.

const BlogPostForm = {
  fields: [
      name: 'frontmatter.authors',
      component: 'select',
      label: 'Author',
      description: 'Select an author for this post',
      options: ['Arundhati Roy', 'Ruth Ozeki', 'Zadie Smith'],
    // ...


  • name: The path to some value in the data being edited.
  • component: The name of the React component that should be used to edit this field. Available field component types are defined here
  • label: A human readable label for the field. This label displays in the sidebar and is optional. If no label is provided, the sidebar will default to the name.
  • description: An optional description that expands on the purpose of the field or prompts a specific action.
  • options: An array of strings.


interface SelectField {
  name: string
  component: 'select'
  label?: string
  description?: string
  options: string[]