v1.0
Checkbox
A checkbox is a native html input enabling users to toggle between checked or unchecked.
Uses framer interactions for transition between variants
Use within any framer component.
Applies all accessible attributes.
Uses native HTML Form attribute to use within any form.
Create a framer component: Using framer create a component that will use this prefab.
Add prefab: Add the prefab to the component and connect the transitions to the matching variants states.
Nest prefab: Nest prefab to the parent frame. Set the prefab position to absolute. Keep in mind that the prefab will not show visually in preview or when published.
Test: Test the component in preview and ensure that your transitions are working.
Done: That is it! You are all set to use this prefab.
When creating the component that will be used with this prefab consider the following:
When creating your component that will use this prefab ensure that there is sufficient contrast between the different states. Read more about required contrast to pass AA WCAG requirements
This prefab should be paired with a label. Use our label prefab to ensure that the prefab is clearly labeled and described to all users.
When using within a form be sure to include an error variant to ensure that when required the user is aware.
Should note that this follows the recommended keyboard controls described by W3 where space only controls the toggle of the checkbox. See source
When the checkbox is going to be a part of a group of checkboxes. Use our Prefab Text for the group label and the utils-set-attribute prefab to set the frame to have the role group and aria-labledby id of the text prefab.
Property
Description
Default Active
Determines if the checkbox is checked by default.
Required
When a part of a form will require the user to check before submitting.
Name*
A name is needed in a form to correctly transmit data upon submission.
ID
The value that will populate the html id attribute.
Form ID
Allows you to associate this input with the form prefab.
Events
Supported events: inActive, active, error