---
title: "Checkbox widgets"
slug: "checkbox-widgets"
tags: ["App Editor (Route)", "Widget", "Checkbox", "Widgets"]
updated: 2025-05-28T20:44:42Z
published: 2025-05-28T20:44:42Z
---

> ## Documentation Index
> Fetch the complete documentation index at: https://support.tulip.co/llms.txt
> Use this file to discover all available pages before exploring further.

# Checkbox widgets

*Here's how to add a checkbox or toggle to a normal step within an app.*

Sometimes, it may be easier for an operator to fill out a checklist or complete an inspection in a normal step, rather than a Form Step.

If you use a normal Step, you can add images to the checklist and customize the layout of the entire step.

In order to track data around the completion of the checklist, you can use the **Checkbox Widget**. The widget can be formatted as a checkbox or as a "toggle" slider.

![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/How%20To%20Use%20the%20Checkbox%20Widget_146889216.png)

This short guide will show you how to use the checkbox widget. Before reading, you will just need to understand [how to use variables in Tulip](https://support.tulip.co/docs/data-types-in-tulip)

## Add a Checkbox Widget to a Step

To add this widget to a step, select the "Embed" option in the Toolbar and choose "Checkbox".

![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/How%20To%20Use%20the%20Checkbox%20Widget_536305108.png)

Then, you will be able to configure the following options in the Widget tab of the Side Pane:

![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/How%20To%20Use%20the%20Checkbox%20Widget_536305695.png)

**Datasource:**

- Variables: Any variable in your app that you've created
- Tulip Table Record: Reference data stored in tables

These must be of a **boolean** type (must be true/false).

**Trigger**: Add triggers that execute when this widget is used.

**Color:** Choose the color for the background of the toggle.

**Toggle:** Choose whether it should appear as a checkbox or toggle.

## Store the Checkbox Value in a Variable

You will likely want to know which boxes were checked when the app is completed or cancelled.

In order to do this, you must store the value of each checkbox in a separate variable.

To do this, first create a series of boolean variables in the app editor or from the Variables pane.

If you are doing a visual inspection checklist, you may want to name each one after the item in the checklist, like "tray_cleaned" for example.

Then, add and select a checkbox, to assign a variable to this widget in the side pane to store the value of the checkbox.

## Further Reading

- [How to Create and Use Variables](https://support.tulip.co/docs/data-types-in-tulip)
- [How to Build Your First Form Step](https://support.tulip.co/docs/how-to-build-your-first-form-step)

---

Did you find what you were looking for?

You can also head to [community.tulip.co](https://community.tulip.co/?utm_source=intercom&amp;utm_medium=article-link&amp;utm_campaign=all) to post your question or see if others have faced a similar question!

**Step**

A view your users will see within an application. **Steps** can be viewed chronologically or in whatever order best fits your process.

Steps can be grouped into **Step Groups**to manage and organize your app Steps.

**Widget**

**Widgets**are the elements that make up a specific **App Step.**Widgets can display information to users, collect user input, or trigger app logic.

*Common widgets include: Interactive Tables, Number inputs, Machine attribute widgets, and more.*

**Widget Toolbar**

The **Widget Toolbar**Is the menu where widgets can be found and added to your application. ![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/toolbar.png)

**Side Pane** **(Context Pane)**

The**Side Pane**is the configuration pane on the right side of the **App Editor**where steps, apps, and widgets can be configured. **Triggers**can be added to adjust widget behavior.![](https://cdn.document360.io/7c6ff534-cad3-4fc8-9583-912c4016362f/Images/Documentation/Context%20Pane.png)

**Variables**

**Variables**are a location to store app information. Variables have a specific type that must match the contents they can store.

Variables are only accessible within a single application and are cleared when the app is restarted or completed.

**Table Record**

A **Table Record** is a reference to a row in a **Tulip Table**. Table Records can be created either from the Table UI or from with an App Trigger.

To edit a record it must be loaded into a **Table Record Placeholder.**
