Select/checkbox/radio

About the field

The select, checkbox, and radio field types allow editors to choose one or several items from a predefined list. Behind the scenes, all of them function similarly but offer different user interfaces for editors.

ACF

In ACF, the field is presented with select, checkbox, radio, and button group field types.

MetaBox

In MetaBox, the field is presented with checkbox list, radio, select, autocomplete, button group, image select, and advanced select field types.

Pods

In Pods, the field is presented as the Relationship field with the custom list option.

Values delimiter

Separate multiple values in the output with a delimiter.

Switch to the Field Options tab and fill out the Values delimiter.

Getting all available options

By default, the field's markup displays the title of the chosen option. The value is accessible under the '.value' property. You can also display the list of all options using the '.choices' property. This can be useful if you need to show a complete list or want to convert it into a form element.

Below is an example that demonstrates how to retrieve all the available information for a single select field. Similarly, you can work with a select field that allows choosing multiple options as well.

{% if select.value %}
    <div class="avf-layout__select">
        <div class="avf-layout__select-label">
            {{ select.label }}
        </div>
        <div class="avf-layout__select-choice">
            <div class="avf-layout__item">
                <div>
                    Chosen option title:
                </div>
                <div>
                    {{ select.title }}
                </div>
            </div>
            <div class="avf-layout__item">
                <div>
                    Chosen option value:
                </div>
                <div>
                    {{ select.value }}
                </div>
            </div>
            <div class="avf-layout__item">
                <div>
                    All available choices:
                </div>
                <div>
                    {% for choice_value, choice_title in select.choices %}
                        <p>
                            {{ choice_value }} : {{ choice_title}}
                        </p>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
{% endif %}