Skip to main content

Getting started with boolean inputs

Learn how to add, configure, and set the value of boolean input components in Retool web apps.

You can use the following components to accept boolean user inputs:

Demo

Features​

Key features of boolean inputs include:

  • Manual or mapped option lists in Checkbox Group and Switch Group.
  • Nested option lists in Checkbox Group and Switch Group.
  • Input validation, including marking components as required or creating custom rules.
  • Event triggering based on status of the boolean input.
  • Style configuration.

Specify content options​

The Content section of the Inspector contains settings that control the content of an input field, such as:

  • Default value
  • Placeholder
  • Label and caption

Define options​

You can define the options for Checkbox Group and Switch Group either manually or by mapping data. Refer to the Define option lists guide for more information.

Checkbox Group also includes a Check strictly setting that, when checked, removes the association between parent and child. For example, checking the parent option does not automatically check the nested child options.

All boolean components include an Add ons section, which enables you to add a label or tooltip to the component.

Configure user interaction​

The Interaction section of the Inspector contains settings that control user interaction and validation, such as:

  • Event handlers, which listen for and handle interactions with your components.
  • Validation rules, which define the types of user inputs that your components accept.

Customize appearance​

You can customize the presentation of your component in the Spacing and Appearance sections of the Inspector. The settings available in the Appearance section depend on the type of component you use.

All components have a Hidden setting, which you can dynamically control with a truthy value that evaluates to true or false. You can also control the hidden property for a component using the .setHidden() method from event handlers and JavaScript queries.

You can also create custom style rules using the Styles setting. Each component has different styles that you can configure, but common ones include colors, fonts, and text styles. Use app-level or organization-level themes to set these styles across all components.

Configure group layout​

Checkbox Group and Switch Group each support different Group layout settings.

When the component has a nested option list, Retool enforces the Tree group layout.

The following screenshots show the different layout options available.

Auto column group layout

Create a dark mode switch​

A common use for Switch is it create a dark mode toggle. This example also demonstrates how to set the default value of the component and add event handlers. Use the following instructions to add a dark mode toggle to your app.

Organization-level themes are available on Business and Enterprise plans only.

  1. Create an organization-level theme with a light mode and a dark mode.
  2. Navigate to your app's settings, and select the theme you just created.
  3. Add a Switch component to the canvas. Update the label to Dark mode.
  4. Set default value to {{ theme.mode === "Dark" }}. This ensures that the switch position corresponds to the current state of the mode.
  5. Add a new event handler with the following settings:
    1. Event: True
    2. Action: Set theme mode
    3. Mode name: Dark
    4. Persist: Checked
  6. Add a new event handler for when the Switch is set to False.
  7. Test out your dark mode toggle.