True / False

A True/False field type (e.g. ACF True/False field), 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.

How to use it

Select the true/false field from your field Group.

As an alternative you could use the Radio Button or Checkbox field.

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>

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;
}