These function exactly like you would expect from a standard control. We’re overriding the default platform style to something a little more bespoke.
white background with a
1px solid border using the
border color and rounded corners with a radius of
4px. The label uses
On selection the border is removed and the square is filled with the
link color and our check icon in
white at the centre.
Checkboxes can also include subtext, in the same style as Data chunks.
17px square, with
8px spacing between the checkbox and the label. Checkboxes are vertically aligned to the centre of the label.
When creating more complex forms it’s sometimes required to add checkbox functionality with more visual prescence. This helps to show what users are selecting and what the available options are. Horizontal sizing of these is flexible based on the container requirements, with a minimum internal spacing of
Enhanced checkboxes should never be attached to each other.
These follow many of the same rules as set out in the radio buttons. The primary difference is the floating check mark which should animate in when an item is selected. It’s a circle with a
link colored border and a
link colored check mark inside.
Standard spacing rules apply here,
16px padding all around and
16px spacing between checkbox items. The circled check icon for the selected state is
17px wide and high, and is offset from the top right corner by
-4px at the top and
-6px at the right. The label font size is
16px and the subtext is