Among the many features of pretty checkbox, shapes might be the most widely used ๐ค
# The below section covers regular checkbox and radio usage. For switch check out the switch docs for available shapes ๐
Pretty Checkbox offers three shapes that can be used by checkbox and radio controls:
p-square (implicit)p-curvep-roundadd to the root div and see your control change!
# < div className = " pretty p-default p-curve " >
< input type = " checkbox " />
< div className = " state " >
< label > Curve </ label >
</ div >
</ div >
# < div className = " pretty p-default p-round " >
< input type = " radio " />
< div className = " state " >
< label > Round </ label >
</ div >
</ div >
# There's no limitation with mix-n-matching shapes. We can create round checkboxes or square radio controls if we want:
Copy < div class = " pretty p-default p-square " >
< input type = " radio " />
< div class = " state " >
< label > Square Radio </ label >
</ div >
</ div >
< div class = " pretty p-default p-round " >
< input type = " checkbox " />
< div class = " state " >
< label > Round Checkbox </ label >
</ div >
</ div >
# Switch is different from checkbox and radio controls in terms of shapes. There are three shapes availale: p-outline, p-fill, and p-slim alongside the p-switch class on the root div.
Copy < div class = " pretty p-switch " >
< input type = " checkbox " />
< div class = " state " >
< label > Basic Switch </ label >
</ div >
</ div >
< div class = " pretty p-switch p-fill " >
< input type = " checkbox " />
< div class = " state " >
< label > Fill Switch </ label >
</ div >
</ div >
< div class = " pretty p-switch p-slim " >
< input type = " checkbox " />
< div class = " state " >
< label > Slim Switch </ label >
</ div >
</ div >
# Fill variants change how the checkbox and radio controls are presented and there are two values that can be used in the root div: p-fill and p-thick
Copy < div class = " pretty p-default p-square p-fill " >
< input type = " checkbox " />
< div class = " state " >
< label > Fill Checkbox </ label >
</ div >
</ div >
< div class = " pretty p-default p-thick " >
< input type = " checkbox " />
< div class = " state " >
< label > Thick Checkbox </ label >
</ div >
</ div >
# Pretty Checkbox is adaptable and can be scaled easily using p-bigger on the root div:
Copy < div class = " pretty p-default p-bigger " >
< input type = " checkbox " />
< div class = " state " >
< label > Bigger </ label >
</ div >
</ div >
# Make it as big or as small as you need by using regular ol' CSS! Just add font-size to the root div:
Copy < div className = " pretty p-default " style =" font-size : 48 px ; " >
< input type = " checkbox " />
< div className = " state " >
< label > Size Me </ label >
</ div >
</ div >
Reset # In some cases you might want to drop the border altogether. Pretty Checkbox has a style for that โ
, but it's best when using in conjunction with icons and animations .
Copy < div class = " pretty p-icon p-plain p-smooth " >
< input type = " checkbox " />
< div class = " state " >
< i class = " icon mdi mdi-check " > </ i >
< label > Plain </ label >
</ div >
</ div >