๐งฟHow to style a rounded bullet-like checkbox for options buttons
This tutorial takes you step by step on how to create rounded checkboxes for options buttons with styling similar to the one shown in the following image:

Select the checkbox element for styling:
In the โEditโ sub-menu open the โDesignerโ card.
Select the Options buttons component you want to style.
Click "+ Sub-Elements".
Change the โElementโ you want to style from โwhole thingโ to โCheckboxโ.
Add styles to the checkbox:
In the โBorderโ tab:
a. Give a value to the border property e.g.
1px solid black
b. Set a border radius e.g.
25px
In the โSizeโ tab, give the checkbox a matching width and height e.g.
25px
Create and style the inner circle:
In the โFontโ tab (the tick is styled as a font), set the
font-size
to0px
orcolor:
transparent
to make it not visible.Click โ+ Filterโ to be able to filter by selected state styling. Change the "When" option to โSelectedโ to style the checkbox selected state.
In the โBackgroundโ tab, give the checkbox a background color.
In the โBorderโ tab, set an inner box shadow to separate the background color from the checkbox border e.g.
inset 0px 0px 0px 3.5px #fff
Thatโs it! You can now play with styling to get it exactly as you want it to be!.
Related Docs:
Last updated