Components

Checkbox

A Checkbox is a UI element that allows users to switch between two mutually exclusive options (checked or unchecked, on or off) through a single click or tap. It can also be used to indicate a subordinate setting or preference when paired with another control.

Checkbox Default (Unchecked)

Created with Sketch. Unchecked
Created with Sketch. Unchecked 10px 20px 
    
      <el-checkbox-group v-model="field.selectedValue" class="neon_form_checkbox_group">
        <el-checkbox v-for="typeOptions in types[field.typeName]" :label="typeOptions.name" :key="typeOptions.name" class="neon_form_checkbox">{{typeOptions.name}}</el-checkbox>
      </el-checkbox-group>
    
/* Form - Checkbox */
.neon_form_checkbox_group.el-checkbox-group {
  display: inline-grid;
}

.neon_form_checkbox .el-checkbox__inner {
  width: 20px;
  height: 20px;
  background-color: #fff;
  border-color: #A8B7C7;
}

.neon_form_checkbox .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: #fff;
  border-color: #A8B7C7;
}

.neon_form_checkbox .el-checkbox__inner:hover {
  background-color: #fff;
  border-color: #A8B7C7;
}

.neon_form_checkbox .el-checkbox__inner:after {
  box-sizing: content-box;
  content: "";
  border: 2px solid #54698D;
  border-left: 0;
  border-top: 0;
  height: 12px;
  left: 5px;
  top: 0;
  position: absolute;
  transform: rotate(45deg) scaleY(0);
  width: 6px;
  transition: transform .15s ease-in .05s;
  transform-origin: center;
}

.neon_form_checkbox .el-checkbox__input.is-checked .el-checkbox__inner:after {
  transform: rotate(45deg) scaleY(1);
}

.neon_form_checkbox .el-checkbox__label {
  font-family: Lato;
  font-weight: 400;
  font-size: 14px;
  color: #54698D;
  letter-spacing: 0;
}

.neon_form_checkbox .el-checkbox__input.is-checked+.neon_form_checkbox .el-checkbox__label {
  font-weight: 700;
  color: #54698D;
}

.neon_form_checkbox.el-checkbox+.neon_form_checkbox.el-checkbox {
  margin-left: 15px;
}

.neon_form_checkbox.el-checkbox {
  margin-left: 15px;
}

States

There are 4 different states for the checkbox;

  • unchecked (default)
  • checked
  • checked and disabled
  • unchecked and disabled

Checked

Use primary buttons for call-to-actions; important prompts that you want to emphasize to our users.

Created with Sketch. Selected
color-code.CSS 
.checkbox-text-checked {
font-family: Lato-Bold;
font-size: 14px;
color: #54698D;
letter-spacing: 0;
line-height: 17px;
}

.checkbox-box-checked{
height: 20px; 
width: 20px; 
background: #FFFFFF;
border: 1px solid #A8B7C7;
border-radius: 2px;
padding-right: 10px;

}

.checkbox-icon{
color: #0070D2; 
content: "fa-square-full"; 

}

Checked and disabled

Use primary buttons for call-to-actions; important prompts that you want to emphasize to our users.

Created with Sketch. Selected and disabled 
.checkbox-text-checked-disabled {
opacity: 50%; 
}

.checkbox-box-checked-disabled {
opacity: 50%; 
}

.checkbox-icon{
opacity: 50%; 

}

Unchecked and disabled

Use primary buttons for call-to-actions; important prompts that you want to emphasize to our users.

Created with Sketch. Unselected 
.checkbox-text-disabled {
opacity: 50%; 
}

.checkbox-box-disabled{
opacity: 50%; 

}

Overview of CSS Classes

Selector
Summary
Parent Selector

.checkbox-text

.checkbox-box

.checkbox-text-checked

.checkbox-box-checked

.checkbox-text-checked-disabled

.checkbox-box-checked-disabled

.checkbox-text-disabled

.checkbox-box-disabled

default text label for checkbox

default checkbox 

text label used when a checkbox has been selected

selected checkbox 

text label used when a checkbox has been selected but has been disabled

checkbox used when an item is selected but disabled for the user

text label used when item is disabled

checkbox has been disabled and unchecked