This is an example of a web form with checkboxes designed using CSS, HTML, and JavaScript. JavaScript has been used to make sure only two checkboxes of the three are selected at a time. The boxes are given the type ‘checkbox' and named as Social, Work, and Sleep. The font type is imported from Google with the URL and the label is set with the styles of font-family as "Montserrat", sans-serif, font-size as 1.2rem, cursor as a pointer to display the hand cursor, display as none to hide the elements, and margin as 1em. In an unchecked event, the styles will be as display: inline-block, border-radius: 20px, vertical-align: middle, transition: .25s .09s, position: relative, background: #deeff7, and box-shadow: 1px 2px 4px 0 rgba(#000, .4). After a checked event, the styles will change to transform: translateX(25px) and the color of the background to #1094fb and the font color to #29316b. Source: