> For the complete documentation index, see [llms.txt](https://wplake.gitbook.io/advanced-views/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://wplake.gitbook.io/advanced-views/field-types/content/binary-choice-field.md).

# 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](/advanced-views/fields/meta-plugins/advanced-custom-fields.md): any True/False field
2. [MetaBox](/advanced-views/fields/meta-plugins/meta-box-fields.md): any Checkbox, Switch field
3. [Pods](/advanced-views/fields/meta-plugins/pods-fields.md): any Boolean field

## 1. How to display a Binary Choice field

1. [Create a new *Layout*](/advanced-views/getting-started/first-layout.md)
2. Add any Binary choice field
3. Save the *Layout*, copy its [embedding shortcode](/advanced-views/layouts/embedding-shortcode.md)
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](/advanced-views/layouts/code-fields/custom-template.md) 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](/advanced-views/features/smart-templates/twig-templates.md#conditions).

#### Displaying a label conditionally

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

#### Adding a class conditionally

```twig
<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](https://utf8-icons.com/):

**Twig template:**

{% code overflow="wrap" %}

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

{% endcode %}

**CSS code:**

```css
.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;
}
```