---
url: "https://vueda.dev/v3/reference/api/vue/BooleanDisplay.md"
title: "BooleanDisplay"
---

# BooleanDisplay

## Overview

Presents a boolean as a word rather than its stored literal, so a read view says "Yes"
instead of `true`. A null or absent value renders the same dash {@link DateTimeDisplay}
uses for an empty date, which is the third state a `NullBooleanField` can hold.

A serializer that sends `1`, `0`, `"true"`, or `"false"` still lands on a word; only
null, undefined, and the empty string read as "no value recorded" and take the dash.

Theme entry: [BooleanDisplay](/v3/reference/theming/keys/BooleanDisplay.md)

## Props

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| <span id="prop-themeOverride">themeOverride</span> | `Object` |  | `null` | A partial ThemeObject keyed by component name, merged over this component's theme and provided to descendants. |
| <span id="prop-value">value</span> | `string\|boolean\|number` |  | `undefined` | The value to present. `null`, `undefined`, and `""` render the dash. |
| <span id="prop-trueLabel">trueLabel</span> | `string` |  | `"Yes"` | Word shown for a true value. |
| <span id="prop-falseLabel">falseLabel</span> | `string` |  | `"No"` | Word shown for a false value. |
| <span id="prop-inline">inline</span> | `boolean` |  | `false` | Renders without a wrapping element, for use inside an existing text row. |
| <span id="prop-class">class</span> | `import('vue').HTMLAttributes['class']` |  | `undefined` | Additional CSS classes applied to the root. |

## Source

`client/lib/display/boolean-display/BooleanDisplay.vue`