View the Demo
View the Demo

Button Group

Button group fields provide a compact, graphical option for selecting a single value from a list.

Screenshot of the button group field interface in the Craft control panel

Settings

url="https://my-craft-project.ddev.site/admin/settings/fields/new" :link="false" :max-height="500" caption="Adding a new button group field via the control panel.">

Button group fields have the following settings:

  • Options — Define any number of options for authors to select from, each with…
    • Label — A text description of the option. Labels are hidden when using the Icons only setting.
    • Value — The value stored when a given option is selected.
    • Icon — Choose from the standard system icon palette.
    • Default? — One option can be marked as the default.
  • Icons only — Hide labels in the UI, displaying only the selected icon for each option.

The field works best with a limited number of visually distinct options.

Development

Button group fields share template, query, and GraphQL capabilities with dropdown fields.