In this Example, you’ll learn to use the Checkbox Default Component to create list items in a form.
Learn more about checkbox forms
Forms typically consist of input elements, such as text fields, checkboxes, radio buttons, and submit buttons. They allow users to quickly enter data in the case of a purchasing form, survey, signup form and any sort of feedback. Data from forms, after it is input by a user, is sent to a server for processing. After data is processed, users will get some sort of output back. Either a confirmation or search results or other information depending on the type of form.
Using the input type checkbox provides a quick and easy way for users to select an option and continue with a form. Outside of forms, checkboxes can be used for a variety of interactions. For example, selecting options from a list, toggling the view of a sub-section in a list, and turning a setting off and on.
When should you use a checkbox?
Checkboxes come in handy when you want users to make selections based on their preferences. When thinking of checkboxes, a multiple-choice survey questionnaire might come to mind where you’re asked to select all of the options from a list that apply to you, like a questionnaire asking you to tick your favorite ice cream flavors, for example.
Because you’re often allowed to select whichever options you want in a checkbox form, they work well on website or app settings pages where users can customize the product to their needs. Checkboxes also work well for AI and machine learning-powered software, such as music streaming applications, which ask users to select their favorite genres and artists and then provide recommendations based on their selections.
In other words, checkboxes are useful when designers and product owners want users to submit multiple inputs.
Differences between radio and checkbox buttons
A radio button, which is usually represented as a colored dot within a larger circle, shares some similarities with a checkbox button. Both allow you to make selections in a form. But radio buttons differ from checkbox buttons in that they only allow you to select one option from a list of mutually exclusive choices.
In some programming languages, radio buttons cannot be unchecked. In HTML if no button in a form is checked, a no name-value pair is sent to the server when the form is submitted.
How a checkbox form element is created
If HTML is used, the <input> tag followed by the type=checkbox attribute is the element that instructs the software to create the web-based form. By default, this type of checkbox will only have two values: on or off.
The HTML checkbox form allows users to interact with it and give it their input. Depending on the user agent and device used, designers and developers can choose from a wide range of input data and control widgets.
How to make a checkbox form in Framer
In Framer you can use the Checkbox Default Component and the Instant transition type to help create this interaction. Create your first frame with one checkbox component and add some text to label your component. In the second frame, place a duplicate of the checkbox from the first frame and set it to the checked state. Then place more checkbox components underneath to indicate that the checkbox has toggled on the view of subsection items. Link the first frame to the second by adding an interaction to the checkbox in the first frame. Make sure the transition type is set to Instant and you’re all set!