WPLake > Blog > ACF True False Field: 3 Things You Should Know

ACF True False Field: 3 Things You Should Know

Time to read: 3 mins

-

ACF Plugins Tips and Tricks

-

Updated 12.04.24

Learn how to enhance the ACF True/False field with the Stylized UI option, and how to query the field and display a checkmark or text based on its value.

Key Points at a Glance

  1. You can enhance the True/False field's appearance by enabling the Stylized UI option, which transforms the default browser checkbox into a sleek switcher, improving the editing experience.
  2. With the Stylized UI enabled, you can customize the labels displayed alongside the switcher, allowing you to convey the field's purpose more effectively to editors, enhancing clarity and usability.
  3. The field stores its value in the post meta table as a number, utilizing 1 for checked and 0 for unchecked states, despite its boolean nature.
  4. The field's value can be displayed to visitors in various ways, such as text labels or checkmarks, offering versatility in representing the field's state on the frontend of your website.
  5. Smart templates from plugins like Advanced Views streamline the process of showcasing ACF fields, including True/False fields, on the frontend, reducing manual efforts and ensuring consistent formatting.

Table of Contents

Intro

#link copied

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.

ACF True False field
True/False field settings allow you to set up the default value and message, which appear alongside the input
Default look for editors of the ACF True false field
By default, the input displays the default browser checkbox
Styled UI look for editors of the ACF True False field
The Stylized UI option allows you to transform the input into a beautiful switcher

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

1. Stores number in the database

#link copied

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.

ACF True False value in the DB
The True/False field saves its value as a number

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.

2. Supports stylization and custom text

#link copied

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.

Presentation settings of the ACF True False field
The presentation settings allow you to enable the Stylized UI, which transforms the mundane browser checkbox into a beautiful switcher
Styled UI look for editors of the ACF True False field
Look for editors with the enabled Stylized UI option

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'.

3. Can be displayed as a check

#link copied

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.

Summary

#link copied

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.

Frequently Asked Questions

  1. What are some examples of use cases for the ACF True/False field?
    The field is commonly used for boolean settings, such as enable/disable options on plain or options pages, or in conditional rules to control the appearance of other fields.
  2. Can I customize the appearance of the field?
    Yes, you can enhance the field's appearance by enabling the Stylized UI option, which transforms the default checkbox into a sleek switcher and allows for custom labels.
  3. How can I display the field's value on the frontend of my website?
    You can display the field's value to visitors in various ways, such as text labels or checkmarks, using PHP code. Alternatively, you can utilize plugins like Advanced Views for automated markup generation.
  4. How can I query posts based on the True/False field's value?
    When querying posts by the field's value, keep in mind its storage format (1 for checked, 0 for unchecked) and use appropriate meta queries or plugins like Advanced Views for efficient retrieval of relevant posts.

Content links (20)

Related articles

About the Author
Maxim Akimov

Certified WordPress expert from Ukraine with over 8 years of experience. Advocate of the BEM methodology and the overall modular approach. Loves sporting activities and enjoys going to the gym and regularly plays table tennis.

0 Comments

    Leave a comment

    Reply to 

    Please be considerate when leaving a comment.

    Not shown publicly

    Got it