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.
How to make one in Framer
In Framer you can use the Checkbox Default Component and the Instant transition type to help create this interaction. Create you 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!