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
`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: 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',
        },
      ],
    },
    // ...
  ],
}

Table of Contents

Options
Example #1: Select an Author
Example #2: Select a Heading Color