Solaris Design System

Checkbox

Checkboxes are a type of inputs that are used to select multiple options.

There are two types of checkboxes and various states.

Types

Productive a productive checkbox is a regular sized checkbox with a label font size. Emotive an emotive checkbox has a bigger box and font size to catch the users’ attention

States

The table below shows the states of the checkboxes for both productive and emotive. For theme responsive, just switch themes to view them.

States Emotive
Type: body-emotive
Checkbox: 24px
Marin-right: 16px
Font-size: var(–base-font-size)		 Productive
Type: body-productive
Checkbox: 16px
Marin-right: 8px
Font-size: var(–text-xsm)
:enabled (:passive) Enabled emotive checkbox theme light Enabled emotive checkbox theme dark Enabled productive checkbox theme light Enabled productive checkbox theme dark
:hover Hover emotive checkbox theme light Hover emotive checkbox theme dark Hover productive checkbox theme light Hover productive checkbox theme dark
:focus Focus emotive checkbox theme light Focus emotive checkbox theme dark Focus productive checkbox theme light Focus productive checkbox theme dark
:selected Selected emotive checkbox theme light Selected emotive checkbox theme dark Selected productive checkbox theme light Selected productive checkbox theme dark
:hover-selected Hover selected emotive checkbox theme light Hover selected emotive checkbox theme dark Hover selected productive checkbox theme light Hover selected productive checkbox theme dark
:focus-selected Focus selected emotive checkbox theme light Focus selected emotive checkbox theme dark Focus selected productive checkbox theme light Focus selected productive checkbox theme dark
:disabled-selected Disabled selected emotive checkbox theme light Disabled selected emotive checkbox theme dark Disabled selected productive checkbox theme light Disabled selected productive checkbox theme dark
:disabled-enabled Disabled enabled emotive checkbox theme light Disabled enabled emotive checkbox theme dark Disabled enabled productive checkbox theme light Disabled enabled productive checkbox theme dark
:skeleton Skeleton emotive checkbox theme light Skeleton emotive checkbox theme dark Skeleton productive checkbox theme light Skeleton productive checkbox theme dark
:readOnly-selected ReadOnly selected emotive checkbox theme light ReadOnly selected emotive checkbox theme dark ReadOnly selected productive checkbox theme light ReadOnly selected productive checkbox theme dark
:readOnly ReadOnly emotive checkbox theme light ReadOnly emotive checkbox theme dark ReadOnly productive checkbox theme light ReadOnly productive checkbox theme dark

Checkbox groups

Versions Emotive
Type: body-emotive
Checkbox: 24px
Marin-right: 16px
Font-size: var(–base-font-size)		 Productive
Type: body-productive
Checkbox: 16px
Marin-right: 8px
Font-size: var(–text-xsm)
:Margin-bottom: 16px Checkbox group emotive theme light Checkbox group emotive theme dark Checkbox group productive theme light Checkbox group productive theme dark

Usage

Checkboxes are used for multiple choices users can select for. Each checkbox works independently from other checkboxes in the list. Checking an adidtional box will not affect other boxes in the list.

When to use

When not to use If you require a user to only select one option from the list - use radio buttons instead.