Mintlify Sandbox

Coding Examples

Overview

Sled Tests

Go Headless

Studio Two

Dashboard Extensions

Backend Extensions

Site Extensions

Extend Websites with SDK

Wix APIs and References

Build Apps

Frontend Modules

Client (Deprecated)

API Preview

Wix CLI

Contexts

Ricos

Extend Websites with Velo

API Reference

Velo

Picasso

import { Property, PropertyList, ExpandableSection } from "@wix/docs-ui/content";

# BooleanValue

A `true` or `false` value. Use it for a yes-or-no setting, such as whether a label is
shown or an item is featured.

## Component

In your component code, import the `BooleanValue` type from `@wix/editor-react-types`:

```ts
import type { BooleanValue } from '@wix/editor-react-types';
```

At runtime it's a plain JavaScript boolean:

```ts
type BooleanValue = boolean
```

### Usage

Your code either consumes a value of type `BooleanValue` or produces one:

::::tabs
:::Consumers
In a component that receives a `BooleanValue`, branch on it to decide what to render:

```tsx
import type { BooleanValue } from '@wix/editor-react-types';

function Field({ showLabel }: { showLabel?: BooleanValue }) {
  return <div>{showLabel && <label>Email</label>}</div>;
}
```
:::
:::Producers
When your code produces a `BooleanValue`, for a context or a function return, assign `true` or
`false`:

```ts
import type { BooleanValue } from '@wix/editor-react-types';

const showLabel: BooleanValue = true;
```
:::
::::

## Manifest

In your manifest, declare the field with the `booleanValue` dataType:

```json
{ "dataType": "booleanValue" }
```

### Declaration

Declare a `booleanValue` field in one of these ways, depending on where the value comes from:

::::tabs
:::Data-property
Declare it as a data property when the Wix user should toggle the value in a panel. It takes
`dataType`, `displayName`, and an optional `defaultValue`:

```json
{
  "showLabel": {
    "dataType": "booleanValue",
    "displayName": "Show Label",
    "defaultValue": true
  }
}
```
:::
:::Context-item
Declare it as a context item when your component supplies the value to descendant components. It
takes just `dataType` and `displayName`:

```json
{
  "showLabel": {
    "dataType": "booleanValue",
    "displayName": "Show Label"
  }
}
```
:::
:::Function-parameter-and-return
Declare it on a function when the function accepts or returns a boolean. It takes `dataType` and an
optional `displayName`, and a parameter may also set `optional`:

```json
{
  "parameters": [
    {
      "dataType": "booleanValue",
      "displayName": "Show Label"
    }
  ],
  "returns": {
    "dataType": "booleanValue"
  }
}
```
:::
::::