Skip to main content

Checkboxes block

Use the checkboxes block to let respondents select multiple items from a list of choices that you provide. The block includes a score feature that can be used to automatically calculate a score depending on the selected choice(s). It also includes a counter feature that can automatically count the amount of selected choice(s).

📺 Preview

📽️ Demo

Run Try on CodePen

📦 Package contents

🏗️ Builder part

The builder part instructs the builder how to manage the block. It defines the configurable properties and settings for the block, which can then be managed with the visual builder. This package contains:

  • Classes:
    • Checkboxes: Checkboxes visual block;
    • Checkbox: Checkbox item in the checkboxes collection;
    • CheckboxCondition: Checkbox condition block to verify if checkboxes are checked or not;
    • UncheckedCondition: Unchecked condition block to verify if all checkboxes are unchecked or not;
    • ScoreCondition: Score condition block to verify a score for the checkboxes;
    • CounterCondition: Counter condition block to count the amount of checked checkboxes;
  • TypeScript typings (should work out-of-the-box);
  • Translations (located in the ./translations folder of the package).

🏃 Runner part

The runner part of the block is responsible for the rendering of the block in a runner (the thing that runs the form). This block package contains all the non-UI-related parts of the block and a base class that is useful for implementing the UI rendering in a runner:

  • Classes:
    • Checkboxes: Base class for implementing the checkboxes in a runner UI;
    • CheckboxCondition: Runner part of the checkboxes condition block;
    • UncheckedCondition: Runner part of the unchecked condition block;
    • ScoreCondition: Runner part of the score condition block;
    • CounterCondition: Runner part of the counter condition block;
  • TypeScript typings (should work out-of-the-box).

👩‍💻 Usage

✨ Installation

npm install tripetto-block-checkboxes
Typescript support

This package contains type declarations and supports TypeScript out-of-the-box.

🏗️ Builder part

ESM/ES5

Importing the block is all you need to do to self-register the block to the builder (see the builder plain JS implementation for an example or the Block loading guide for more information about loading blocks).

import "tripetto-block-checkboxes";

// The code above imports the ES5 or ESM version based on your project configuration.
// If you want to use the ES5 version, you can do an explicit import:
import "tripetto-block-checkboxes/es5";

CDN

You can also use the builder part directly in a browser using a CDN (see the builder HTML implementation for more information).

<html>
<body>
<script src="https://unpkg.com/tripetto"></script>
<script src="https://unpkg.com/tripetto-block-checkboxes"></script>
<script>
Tripetto.Builder.open();
</script>
</body>
</html>

Translations

The available translation for the block are located in the translations folder of the package.

tip

See the Loading a translation for a stock block guide to learn how to load the block translation into the builder.

🏃 Runner part

The runner part contains a base class for implementing the checkboxes in a runner UI (read the visual block tutorial to learn how to implement a runner UI for a block):

import { Checkboxes } from "tripetto-block-checkboxes/runner";

// The code above imports the ES5 or ESM version based on your project configuration.
// If you want to use the ES5 version, you can do an explicit import:
import { Checkboxes } from "tripetto-block-checkboxes/runner/es5";

// Now you can extend the checkboxes with your UI rendering
class CheckboxesBlock extends Checkboxes {
// UI rendering implementation depending on the runner used
}

🎭 Stock runners

This block is included in the following stock runners:

tip

If you are integrating the builder together with one of the stock runners, you can use the builder block bundle that is included in the stock runner packages to load the builder part of all the blocks with a single import. See the Import block bundles guide for more information.

🚢 Distribution

This block is distributed through npm:

▶️ https://www.npmjs.com/package/tripetto-block-checkboxes

📁 Source code

This block is open-source and the code is on GitLab:

▶️ https://gitlab.com/tripetto/blocks/checkboxes