Displaying Binary Choice field

Binary choice field type, often represented by a checkbox or a pair of radio buttons with Yes/No labels, is suitable when you have a statement or question that can be answered with a binary (two-option) response.

Advanced Views natively supports the following binary types:

1. ACF: any True/False field

2. MetaBox: any Checkbox, Switch field

3. Pods: any Boolean field

1. How to display a Binary Choice field

1. Create a new Layout

2. Add any Binary choice field

3. Save the Layout, copy its embedding shortcode

4. Embed Layout: paste the shortcode inside the target place

By default, Advanced Views displays only a div with a choice-related class. You can customize the Layout template to use the render options:

2. Render options for Binary Choice field

2.1) Conditional usage

You can use the True/False field in any Twig conditions.

Displaying a label conditionally

<p>The event is {% if true_false.value %}open{% else %}closed{%endif %}.</p>

Adding a class conditionally

<p class="{% if true_false.value %}event-open{% else %}event-closed{%endif %}">
Event status</p>

2.2) Displaying check icon

In addition to conditional usage, the True/False field can be visually represented as a check or cross icon. This approach provides a clear, visual way to display binary information. For this example, we've used the UTF-8 check and cross icons:

Twig template:

<div class="switcher switcher--state--{% if true_false.value %}checked{% else %}unchecked{% endif %}"></div>

CSS code:

.switcher {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.switcher--state--checked::after {
    content: "\2713"; /* Check mark */
    color: green;
}

.switcher--state--unchecked::after {
    content: "\00D7"; /* Cross mark */
    color: red;
}