1. Home
  2. Guides & Tutorials
  3. How To Build Checkboxes

How To Build Checkboxes

Don’t feel like reading? Don’t worry we got you covered. Sit back, relax and let us run you through it in this video!

Designing Your Checkboxes In Figma

To create checkboxes your design will need to contain two parts. First, using variants you’ll need to design the various states of your checkboxes (i.e. default, hover, selected, unselected). Second, you’ll need to create a frame containing the various options for your checkboxes.

Checkbox Variants

Figure 1 showcases two sets of variants. Each set of variants defines three states (which will be used for the default, hover and selected state of our checkboxes). You’ll notice that we didn’t design an unselected variant, you are free to chose for which state you want a particular variant.

Figure 1: Example Checkbox Variants

A checkbox doesn’t necessarily need to comprise a rectangle with a text layer. You can choose to have purely text-based checkboxes (as shown on the right) or use other shapes as you see fit.

Note that weave.ly only supports centered and outside strokes in Figma (e.g. in the leftmost set of variants in Figure 1). This is due to CSS restrictions.

Framing the Checkboxes

Once you have designed your checkbox variants all that remains to be done is to create instances of these variants. Each instance will represent an option which the user can choose. By framing these options together you enable weave.ly to determine that these a set of options belong to the same set of checkboxes.

Figure 2 shows an example of how we can use our variants designed in Figure 1 to create two sets of checkboxes. The instances frame (below the variant designs) contains two frames: Text Checkboxes and Rectangle Checkboxes. Each frame contains instances of the respective variants. You’ll notice that you can name the options however you want, weave.ly will automatically determine the styling of your checkboxes from the variants.

Figure 2: Example of Framing Variant Instances to Create Sets of Checkboxes

Tagging Your Boxes in the Plugin

Once you select a Figma frame containing instances of variants the plugin will provide you with a list of taggable functionality (see Figure 3). To create checkboxes you need to use Selectable Text.

Figure 3: Taggable Functionality for Frames of Variant Instances

You’ll need to tell the plugin which variant to use for which state of your checkboxes (see Figure 4). More specifically you’ll need to configure two things. First, you can select which variant to use for each state of your checkbox using the pill buttons (i.e. default, hover, selected, unselected). For each state you can choose a variant from the dropdown menu. Second, in the Element Data section you’ll need to specify the value for each option. In our example, when a user selects Rectangle Option 1 the radio button group will output the value A.

Figure 4: Configuring Checkboxes in the Plugin

Final Step in weave.ly Editor

You’ll notice that purely following the steps above your checkboxes will behave like radio buttons . In fact until now the tutorial for checkboxes or radio buttons is exactly the same. To allow users to check multiple boxes you’ll need to open the weave.ly editor after publishing your design.

Figure 5 showcases how to do this in the editor. When you select a Selectable Text block you can tick the multipleAnswers checkbox in its configuration panel. In doing so you enable users to select multiple options. Moreover, you can specify how multiple values need to be aggregated into a single piece of text using the separator option.

Figure 5: Enabling multipleAnswers in the weave.ly editor

Result in a Web App

Figure 6 provides an overview of our example as well as the final result once the example is published as a weave.ly web application.

Figure 6: Checkboxes Example
Updated on January 16, 2023

Was this article helpful?

Related Articles