How to create a toggle button / tickbox?

[TRM]

Hi,

I am quite new to penpot. Can someone please explain how to create a toggle button, a tickbox in penpot?

If I click the button it should get enabled and if I click again It should be disabled again.
Do I use an extra board for this?
Or should I use two shapes like one rectangle outline (for disabled) and another one filled (for enabled)?

Any help is appreciated!

[LauraKalbag]

I’ve tried this before and it can be tricky but doable!

Here’s how I would do it:

1. Create the unchecked state checkbox.
2. Create a separate board for a checked state checkbox.
3. Add prototyping interaction to the unchecked checkbox to toggle the unchecked checkbox as an overlay on click:
   
   
4. Add prototyping interaction to the checked checkbox to close the its own overlay on click:
   
   

Here’s how that looks in action:

Here’s the Penpot file for the example above:
checkbox prototyping demo.penpot (20.4 KB)

[TRM]

Hi Laura,

great job - thanks!

Maybe it would be a good idea to put such standard components inlcuding its’s behaviour somewhere into penpot by default? May a library?
Standard UI compontens like toggle-boxes, input boxes, password boxes, dropdown menus, sliders, tables, lists, etc. should be available by default in my opinion. So the user can use them directly without creating complicated interactions.
It would be great if those components are available by default and the user only needs to change the design of these components to fit e.g. CI.