Checkboxes
Adding and styling checkboxes.
Last updated
Was this helpful?
Adding and styling checkboxes.
Last updated
Was this helpful?
Checkboxes are parts commonly used in forms to allow users to make one or more selections from a list of options. They typically appear as small square boxes next to each option, and users can click or tap on the checkbox to toggle its state between checked (selected) and unchecked (deselected). Unlike radio buttons, checkboxes allow users to select multiple options simultaneously.
Location in the Parts Library: Base Parts > Data Input > Checkbox
To add a checkbox part, select the part where you’d like to add your checkbox and click ‘+’.
Checkboxes are typically used in situations where a list of options is provided, and one or more selections can be made.
To set up the checkboxes correctly as a group of options all related to each other in a list, each needs to be assigned a model, an ID, and a value.
Let's say we have an example where we ask our users to select their preferred methods of communication from a list of three communication types - email, phone, and mail.
First, we edit the text next to each checkbox to provide the correct list of options.
Then, each of the checkboxes is configured to ensure they have a model, an ID, and a value. The property editors for these are shown below:
In the example, we want our list of communication types to be:
Phone
The process for setting up our checkboxes in this list is as follows:
Update the text next to each checkbox.
Duplicate any list items (which will include the checkbox and text), editing any text, until all the options are in the list.
To set up the ID, state model, and values:
Update the first checkbox (Email) to apply an ID. Do this by selecting ID in the property editor, and providing an ID that makes sense. In this example, CommunicationViaEmail has been chosen. Then, apply a State. Do this by selecting State Model in the right property editor, and giving the state a name, such as 'Email'. A default is not required. Then update the value of the checkbox by calling it 'email'.
Update the second checkbox (Phone) to apply an ID of 'CommunicationViaPhone'. Then update the State Model by naming the state 'Phone'. Then update the value of the checkbox by calling it 'phone'.
Update the last checkbox (Mail) to apply an ID of 'CommunicationViaMail'. Then update the State Model by naming the state 'Mail'. Then update the value of the checkbox by calling it 'mail'.
To see this in action, press play on the following short video:
To add a checkbox and text to a list, select an existing item (making sure to select the right parent part), and duplicate it using the edit menu in the top toolbar. Here's how:
You can also change the colors of checkboxes in an active state, when focused, and on hover. These are done the same way for foreground and background color.
To change the checkbox color when the checkbox is being hovered, select the checkbox and open the 'Colors on Hover' editor on the right. Now you can set your preferred background and foreground color combination to signify that the checkbox is being hovered.
The 'Color on Focus' editor on the right refers to the color of the checkbox after it has been clicked, or if the user tabs to the checkbox.
The 'Color on Active' editor on the right refers to the color of the checkbox when it is active (the moment it is clicked).
Default Checkboxes are naturally rounded on the edges.
Checkboxes can have the rounding removed or amended using the Decoration Editor, in the 'Rounding' tab.
Any next to the checkboxes can be changed using the Text Editor and styled using the Font Editor. You can change the font family, size, weight, line height, and style.
Checkboxes have more properties than most other parts. To color the checkbox when it is not checked, set the background color. To color the checkbox when it is checked, set the foreground color.
The background colors of an unchecked checkbox can be a .
Checkboxes come with preset , as well as the ability to set the exact size. The preset sizes can be made responsive.
can be applied to all of the checkbox, the top left, top right, bottom left, and bottom right, or a combination of these. There are various degrees of rounding ranging from none to full, with incremental size points in between.
Checkboxes naturally come with a pale . To change the color of the border select the checkbox, go to the property panel on the right and select 'Border', then change the color, style, and thickness to your desired border.
Rows and columns
Text
Customizing and formatting
