Radical Design Course by Jack McDade

From the creator of Statamic

Learn how to make your websites standout and be remembered.

Taking your approach on designing things actually makes it fun, more natural, and overall easier.

— Dominik, Developer

Button Group Fieldtype

Buttons. Create some options and let your users select one and only one. May they choose wisely.

Button Group Fieldtype UI
The Button Group Fieldtype in action!

Overview

The button group fieldtype is a multiple choice input where you only get one choice. It saves the chosen option from a preset list.

Configuring

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

seat_choice:
type: button_group
instructions: Choose your airline seat. Choose wisely.
options:
left: Left
middle: Middle
right: Right

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

options:
- Left
- Middle
- Right

Data Structure

The chosen option is stored as a string. If you only specified values for the options array, then the label will be saved.

seat_choice: middle

Templating

It's a string, so you can just use that value.

<p>I love sitting in the {{ seat_choice }} seat. A lot.</p>
<p>I love sitting in the {{ $seat_choice }} seat. A lot.</p>
<p>I love sitting in the middle seat. A lot.</p>

Options

clearable

boolean

Allow deselecting all options, making null a possible value. Default: false.

options

array

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

Docs feedback

Submit improvements, related content, or suggestions through Github.

Betterify this page →