Checkboxes allow users to select and deselect items in bulk. They provide the ability for users to select one or several items, deselect, or initiate an action.
Checkboxes are made up of a container and can include either a check icon or partial icon in their center.
The primary element required to make a checkbox is a container with clearly distinguishable bounds.
An icon can be added to a checkbox container to show different checkbox states including selected and partial selection.
Icons inside the container should have adequate padding around it to support visual hierarchy and balance. We recommend providing even padding along the top, bottom, right, and left of the icon.
provide minimum 3 px of padding around the icon.
allow icon to extend to edge of container.
Always maintain a minimum 10 pixel margin between checkboxes or components so that they do not become lost.
Checkboxes are very flexible components that can be placed anywhere you need to provide a user with choices. Examples of checkbox placement include within forms, tables, or settings pages.
Denali’s components are completely themeable. This allows you to use our framework and adapt the visual style of Denali’s components to match your prodcut’s unique visual brand. Check out our guide to themeing with Denali to find out more.
For all variables visit the CSS documentation page for checkbox.
Dennit Racing uses a customized Denali theme that aligns visually with their brand. Dennit’s checkboxes feature custom type, background color, border radius, border color and icons.