---
title: "Boolean"
description: "This article explains what the boolean field is and how to configure it."
meta_title: "Boolean"
category: "fields"
audience: developers
lastUpdated: "2025-11-06T01:07:50.000Z"
---

The boolean field allows content writers to select a `true` or `false` value. The field is displayed as a toggle in the [Page Builder](https://prismic.io/docs/guides/page-builder.md).

Boolean field values can be used like a boolean in JavaScript for conditional rendering.

**Next.js example:**

```tsx
{
  slice.primary.is_beta ? <span>Beta</span> : <span>Production</span>;
}
```

**Nuxt example:**

```vue-html
<span v-if="slice.primary.is_beta">Beta</span>
<span v-else>Production</span>
```

**SvelteKit example:**

```svelte
{#if slice.primary.is_beta}
  <span>Beta</span>
{:else}
  <span>Production</span>
{/if}
```

# Add a boolean to a content model

1. **Open Slice Machine**

   In your Prismic project, start Slice Machine to begin editing content models.

   ```sh
   npx start-slicemachine --open
   ```

2. **Add a boolean field**

   In Slice Machine, navigate to the slice, page type, or custom type you want to modify. Add a **boolean** field.

   The **label** determines the label shown to content writers in the [Page Builder](https://prismic.io/docs/guides/page-builder.md). Use an easily understood name.

   The **API ID** determines the property name in the Content API. Use a short, snake-cased name.

3. **(Optional) Set a default value**

   By default, a boolean is set to `false`. It can default to `true` by checking the **Default to true** checkbox in the boolean's settings.

4. **(Optional) Set custom labels**

   A boolean can display custom labels for `true` and `false`. For example, you could set `true` to "Yes" and `false` to "No."

   Open the field settings and set custom labels in the **True Placeholder** and **False Placeholder** fields.

   > Custom labels only change the text shown in the Page Builder. The API will always return `true` or `false`.

# Use booleans

Booleans can be used like a boolean in JavaScript.

In this example, "Beta" is displayed when the `is_beta` boolean is `true` and "Production" when it is `false`.

**Next.js example:**

```tsx
// prettier-ignore
{slice.primary.is_beta ? (
  <span>Beta</span>
) : (
  <span>Production</span>
)}
```

**Nuxt example:**

```vue-html
<span v-if="slice.primary.is_beta">Beta</span>
<span v-else>Production</span>
```

**SvelteKit example:**

```svelte
{#if slice.primary.is_beta}
  <span>Beta</span>
{:else}
  <span>Production</span>
{/if}
```

# API response

Here is what a boolean looks like from the Content API:

```json
{
  "example_boolean": true
}
```