---
title: "Boolean"
description: "This article explains what the boolean field is and how to configure it."
meta_title: "Boolean"
category: "fields"
audience: developers
lastUpdated: "2026-04-23T01:17:46.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

Boolean fields are added using the [Type Builder](https://prismic.io/docs/type-builder.md), a tool for building by hand, or the [Prismic CLI](https://prismic.io/docs/cli.md), a tool for AI agents.

* **Type Builder:**

  > **Important**
  >
  > Type Builder is rolling out to new users. If you do not have access, use **Slice Machine**.

  1. **Watch for changes**

     In your local website project, start the Prismic CLI's `sync` command. The CLI will watch for changes in the Type Builder and pull them into your project.

     ```sh
     npx prismic sync --watch
     ```

     > **Tip**: You can pull Type Builder changes at any time using `npx prismic
     >   sync`.

  2. **Add a boolean field**

     In the Type Builder, navigate to the slice, page type, or custom type you want to modify. Add a **boolean** field and provide the following:

     * **Label**: The label shown to content writers in the [Page Builder](https://prismic.io/docs/guides/page-builder.md). Use an easily understandable name.
     * **API ID**: 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`. Open the field settings and set the following:

     * **True Placeholder**: The label shown when the field is `true`. For example, "Yes."
     * **False Placeholder**: The label shown when the field is `false`. For example, "No."

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

     You can now close the Prismic CLI `sync` command or add your next field.

* **Prismic CLI:**

  > Your AI agent can perform these steps for you. See [Prismic with AI](https://prismic.io/docs/ai.md) for details.

  1. **Add a boolean field**

     Use the `prismic field add boolean` command to add a boolean field to a slice.

     ```sh
     npx prismic field add boolean is_beta --to-slice MySlice
     ```

     Use `--to-type` to add the field to a page type or custom type instead.

     ```sh
     npx prismic field add boolean is_beta --to-type page
     ```

     Use `--default-value` to set the default to `true` or `false`. Use `--true-label` and `--false-label` to set custom labels shown in the Page Builder.

     ```sh
     npx prismic field add boolean is_published --to-slice MySlice \
       --default-value true \
       --true-label "Yes" \
       --false-label "No"
     ```

* **Slice Machine:**

  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 understandable 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
}
```