Radio Fieldtype

Radio buttons. The "you can only have one" variation of checkboxes. Create some options and let your users select one and only one. May they choose wisely.

Screenshot of Radio — The Radio Fieldtype in action!

Overview#

The radio 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.

favorite:
  type: radio
  instructions: Choose your favorite food.
  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

Appearance#

Use the appearance setting to change how options are rendered in the Control Panel:

favorite:
  type: radio
  appearance: chips
  options:
    donuts: Donuts
    icecream: Ice Cream
    brownies: Brownies

Value	Description
`default`	Standard radio buttons, stacked vertically.
`inline`	Radio buttons in a horizontal row.
`chips`	Pill-style buttons with larger touch targets.

Hot Tip!

inline: true still works on publish forms, but when you edit and save the field in the blueprint editor, Statamic converts it to appearance: inline.

Chips#

The chips appearance option is new in Statamic v6.22. Chips are inline pill-style buttons with larger touch targets. You can select them in the control panel under the appearance setting or configure them in the blueprint YAML, as shown above.

Chips are available for both radio and checkbox fieldtypes.

Chips configuration for radio fieldtype — Appearance options for the radio fieldtype, including chips.

Chips on a publish form for radio fieldtype — And here's what it looks like on a publish form.

Options in blueprint YAML#

See Select · Options in blueprint YAML—checklists defined in the blueprint use the same expanded key / value option rows for ordered, storage-agnostic option lists.

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.

favorite: brownies

Templating#

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

<p>I love {{ favorite }}. A lot.</p>

<p>I love {{ $favorite }}. A lot.</p>

<p>I love donuts. A lot.</p>

Options

appearance

string *default*

Choose how the radio buttons are displayed in the Control Panel. One of default, inline, or chips. Default: default.

options

array

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