Select

The select field allows content writers to choose an option from a list of text options.

Add a select field to a content model

• Open Slice Machine

  In your Prismic project, start Slice Machine to begin editing content models.

  npx start-slicemachine --open

• Add a select field

  In Slice Machine, navigate to the slice, page type, or custom type you want to modify. Add a select field.

  The label determines the label shown to content writers in the Page Builder. Use an easily understood name.

  The API ID determines the property name in the Document API. Use a short, snake-cased name.

  The Use first value as default setting determines if the first option is selected by default. If this option is not checked, content writers can leave the field empty.

• Define options

  Under the Options section, add as many options as needed.

Use select fields

Select fields can be used like a string in JavaScript.

<p>My favorite fruit: {slice.primary.favorite_fruit}</p>

Tips

• Use isFilled.select() to check if a select field has a value

  import { isFilled } from "@prismicio/client";
  
  if (isFilled.select(slice.primary.my_select_field)) {
    // Do something if `my_select_field` has a value.
  }

API response

Here is what a select field looks like from the Document API:

{
  "example_select": "My selected value"
}