Checkboxes

Buttons are calls to actions that indicate an action will take place.

CHECKBOX STYLING

Unselected

unselected checkbox

Selected

selected checkbox

Multiples

Space between checkboxes should be at least space-s, so items will be purposefully selected. It is helpful to add a select or clear all action for longer selection lists.

Unselected

multiple unselected

Selected

multiple selected

BEST PRACTICE 1

If there are no vertical space restrictions, stack checkboxes vertically. It's easier for users to read and select items down a vertically aligned list than a horizontal one.

Do This

button height

Don't Do This

corner radius