# checkboxes

A checkboxes field allows a list of options where a user can select one or more items. Checkbox items can also be deselected, unlike radio fields.

# Module field definition

// Configuring the `genres` field in a module's `fields.add` subsection:
genres: {
  label: 'Select the genres that apply to this book',
  type: 'checkboxes',
  choices: [
    {
      label: 'Romance 🥰',
      value: 'romance'
    },
    {
      label: 'Comedy 🤣',
      value: 'comedy'
    },
    {
      label: 'Crime 😰',
      value: 'crime'
    }
  ]
}

# Settings

# Required

Property Type Default Description
choices array n/a An array of options that the editor can select from. See below.
label String n/a Sets the visible label for the field in the UI
type String n/a Specifies the field type (checkboxes for this type)

# Optional

Property Type Default Description
def Array n/a The default value for the field. Values must be from the defined choices' values.
help String n/a Help text for the content editor
htmlHelp String n/a Help text with support for HTML markup
if Object {} Conditions to meet before the field is active. See the guide for details.
required Boolean false If true, the field is mandatory

# choices configuration

The choices setting in checkboxes, radio, or select fields configures the options that a user will see in the interface and the values that the server will allow in validation. The choices value is an array of objects with label and value properties.

  • value is used in the field's database value
  • label is the more human-readable version used in interfaces

# Use in templates

The checkboxes field data value is stored in an array of the selected options' value. Nunjucks provides the {% for %} template tag (opens new window) that you can use to loop over the array.

<ul>
  {% for genre in data.piece.genres %}
    <li>{{ genre }}</li>
  {% endfor %}
</ul>