ACF True/False Field

Advanced Custom Fields (ACF) is one of the leading meta field plugins. The True/False field is part of the Choice group fields, empowering editors to create boolean fields. These are commonly utilized for enable/disable settings on plain or options pages.

True/False fields are also frequently utilized in Conditional rules to control the appearance of other fields. Hiding optional fields, along with grouping them, is an effective method for making complex data sets clearer.

Let's review the key distinct features of the ACF True/False field to understand its behavior.

The True/False field in Advanced Custom Fields (ACF) stores its value in the post meta table as a number. Despite representing a boolean value, the storage in the post meta table is universal and utilizes a text type. ACF stores 1 when the field is checked and 0 when the field is unchecked.

When working with meta queries involving the True/False field, it's essential to keep this storage format in mind.

To simplify query and display tasks, consider utilizing smart templates from the Advanced Views plugin, which offer built-in post queries and automated template generation. The Pro version facilitates easy mastery of queries by meta fields and supports all meta fields created by ACF, along with other vendors.

As mentioned briefly above, by default, the True/False fields utilize the default browser's input, which resembles a relic from the early days of the web. Fortunately, ACF incorporates the jQuery Select2 library, which offers a more polished UI compared to the default inputs.

When the Styled UI option is enabled, in addition to the enhanced UI, it allows for the customization of labels on the left and right sides. These labels can be used to better convey the purpose of the switcher to editors. For example, instead of the default 'Yes/No', it can be 'Enabled/Disabled' or 'With/Without'.

We've clarified how the True/False field stores values and what UI options it offers for editors. Now, let's review the display aspect. The True/False field value is often not only used as a backend setting but also shown to visitors as a state value.

The simplest approach is to display the text label representing the field value's state. To achieve this, we can utilize the get_field function. Additionally, it's important to escape the value for security purposes.

<?php

// todo use your field name
$value = get_field('my_true_false'); 
$label = $value ? 'open' : 'closed';

printf('<p>The event is %s</p>', esc_html($value));

While the first display approach suits many cases, sometimes we need to represent the value as a checkmark to indicate a checked or unchecked state.

For this purpose, we can add a specific class to the output <div> based on the value and display any icon using CSS code. For example:

<?php

// todo use your field name
$value = get_field('my_true_false'); 
$label = $value ? 'checked' : 'unchecked';

printf('<div class="switcher switcher--state--%s"></div>', esc_html($value));

Then, in CSS, it can be:

.switcher--state--checked {
    position: relative;
}

.switcher--state--checked::after {
    content: "\2713";
    font-size: 24px;
    color: green;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

In the CSS rule, you can use any UTF icons you need.

Tip: By utilizing smart templates from the Advanced Views plugin mentioned earlier, you can effortlessly showcase any ACF fields, including True/False fields, without concerning yourself with field names or formatting conversations.

The ACF True/False field allows for the easy management of boolean setting fields. Often, this field is utilized in conditional rules to control the appearance of other fields.

By default, it utilizes a browser checkbox input, but thanks to the ACF presentation settings, it can be transformed into a beautiful switcher.

When working with this field, it's important to remember that it stores values in the postmeta table as numbers. So, 1 is saved when the field is checked, and 0 when unchecked. With these values, you can proficiently manage meta queries manually or using the Advanced Views plugin.

In addition to backend use, the field can also be displayed on the front end to represent some state as text or a checkmark. Utilizing the get_field function allows you to retrieve the value and incorporate it into the markup.

Alternatively, you can employ smart templates from the Advanced Views plugin, which provide automated generated markup.