# 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
readOnly Boolean false If true, prevents the user from editing the field value

# 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>