> This page is for Developer.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.makeswift.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.makeswift.com/_mcp/server.

# Checkbox

> Adds a Checkbox panel in the Makeswift builder to visually edit a `boolean` prop.

Adds a Checkbox panel in the Makeswift builder to visually edit a `boolean` prop.

![](/_fern-img/876424f6e757dc77b005c64b3d57d0f626d853fb53764fc2c20692e4c937c230.webp)

## Params

**`label`** `string` — default: Label

Text for the panel label in the Makeswift builder.

---

**`description`** `string`

The description shown in the Panel of the Makeswift builder. This can be written in Markdown format.
Added in [`v0.24.8`](https://github.com/makeswift/makeswift/releases/tag/%40makeswift%2Fruntime%400.24.8).

---

**`defaultValue`** `boolean`

The value passed to your component when nothing is set in the Makeswift
builder.

---

## Prop type

The Checkbox control passes a `boolean` to your component. If you don't set a `defaultValue` and no value is set in the builder, your component receives `undefined`.

## Example

The following example adds a Checkbox control to the `showLogo` prop of a Navigation component.

**`Navigation.makeswift.ts`**

```tsx Navigation.makeswift.ts
import { Checkbox } from "@makeswift/runtime/controls";

import { runtime } from "@/makeswift/runtime";

import { Navigation } from "./Navigation";

runtime.registerComponent(Navigation, {
  type: "navigation",
  label: "Navigation",
  props: {
    showLogo: Checkbox({
      label: "Show Logo",
      defaultValue: false,
    }),
  },
});
```

**`Navigation.tsx`**

```tsx Navigation.tsx
interface Props {
  showLogo: boolean;
}

export function Navigation({ showLogo }: Props) {
  return (
    <nav>
      {props.showLogo && <img src="/logo.png" />}
      {/* ... */}
    </nav>
  );
}
```

> **Info**
>
> `.makeswift.ts` is a naming convention for organizing Makeswift registration code. [Learn more](/developer/docs/reference/reactruntime/register-component#organizing-registration-code).