Radical Design Course by Jack McDade

From the creator of Statamic

Learn how to make your websites standout and be remembered.

Just exceptional. Thank you so much, Jack, you smashed it.

— Hugo, Developer

Checkboxes Fieldtype

Checkboxes! Make some checkboxes, click the checkboxes, and store a record of which boxes of which ones you clicked. They're boxes you check.

Checkboxes Fieldtype UI
The Checkboxes Fieldtype in action!

Overview

The checkboxes fieldtype is a multiple choice input. It saves one or more options chosen from a preset list. In other words, they're boxes you check.

Configuring

Use the options setting to define a list of values and labels.

favorites:
type: checkboxes
instructions: Choose up to 3 favorite foods.
options:
donuts: Donuts
icecream: Ice Cream
brownies: Brownies

You may omit the labels and just specify keys. If you use this syntax, the value and label will be identical.

options:
- Donuts
- Ice Cream
- Brownies

Data Structure

The values are stored as a YAML array. If you only specified values for the options array, then the labels will be saved.

favorites:
- donuts
- icecream

Templating

You can loop through the checked items and access the value and label of each item inside the loop.

<ul>
{{ favorites }}
<li>{{ value }}</li>
{{ /favorites }}
</ul>
<ul>
<li>donuts</li>
<li>icecream</li>
</ul>

To conditionally check if a value has been selected, you can combine the pluck and contains modifiers:

{{ if favorites | pluck('value') | contains('donuts') }}
<span>Contains donuts!</span>
{{ /if }}

Variables

Inside an asset variable's tag pair you'll have access to the following variables.

Variable Description
key The zero-index count of the current item
value The stored value of the checkbox
label The label of the checkbox item from the field config

Options

inline

bool

Show the checkboxes next to each other in a row instead of stacked vertically. Default: false

options

array

Sets of key/value pairs define the values and labels of the checkbox options.

Docs feedback

Submit improvements, related content, or suggestions through Github.

Betterify this page →