## Checkbox & Radio usage

Same rules apply for checkboxes and radio buttons. Shown examples are mixed and apply to both.

Do.

List checkboxes or radio buttons in a vertical list with labels on the right side of the box.

Don't.

Don't separate checkboxes from labels in any way.

Don't.

Don't ever use labels on the left in a vertical list, it doesn't give a good visual overview of selected items to the user. Left side labels should be avoided in general, use them only in right-aligned text blocks.

Caution.

It is OK to use horizontally aligned checkboxes and radio buttons in cases there are no more than 2-3 items and they fit in one line. In cases where the items occupy multiple lines use a vertical listing or consider using button-style checkboxes or radio buttons.

View Checkbox component Components
View Radio component Components