Components

Radio Buttons

Radio buttons are used in Neon when a user must choose a single option from a list of items.

The radio buttons in Neon are styled in a simple visual style, consisting of a background, and outline color.

Radio Button Default (Not selected)

Created with Sketch. Not selected
Created with Sketch. Not selected 10px 20px 
    
      <el-radio-group v-model="field.selectedValue" class="neon_form_radio_group">
        <el-radio v-for="typeOptions in types[field.typeName]" :label="typeOptions.name" class="neon_form_radio">{{typeOptions.name}}</el-radio>
      </el-radio-group>
    
/* Form - Radio */
.neon_form_radio_group.el-radio-group {
  display: inline-grid;
}

.neon_form_radio .el-radio__inner {
  width: 20px;
  height: 20px;
  border: 1px solid #D8DDE6;
  background: #fff;
}

.neon_form_radio .el-radio__input.is-checked .el-radio__inner {
  border: 1px solid #0074D9;
  background: #fff;
}

.neon_form_radio .el-checkbox__inner:hover {
  background-color: #fff;
  border-color: #0074D9;
}

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

.neon_form_radio .el-radio__input.is-checked+.neon_form_radio .el-radio__label {
  font-weight: 700;
  color: #54698D;
}

.neon_form_radio .el-radio__inner:after {
  width: 12px;
  height: 12px;
  border-radius: 100%;
  background-color: #54698D;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%) scale(0);
  transition: transform .15s ease-in;
}

.neon_form_radio .el-radio__input.is-checked .el-radio__inner:after {
  transform: translate(-50%,-50%) scale(1);
}

.neon_form_radio.el-radio+.neon_form_radio.el-radio {
  margin-left: 15px;
}

.neon_form_radio.el-radio {
  margin-left: 15px;
}

States

There are 4 different states for the radio button;

  • not selected (default)
  • selected
  • selected and disabled
  • not selected and disabled

Selected

Created with Sketch. Selected 
.radio_button_selected {
background: #0074D9;
}

.radio_label_selected {
font-family: Lato-Bold;
font-size: 14px;
color: #54698D;
letter-spacing: 0;
}

Selected and disabled

Created with Sketch. Selected & Disabled 
.radio_button_disabled_selected {
background: #FFFFFF;
border: 1px solid #54698D;
}

.radio_switch_disabled_selected {
background: #0074D9;
}

Not selected and disabled

Created with Sketch. Not selected & Disabled 
.radio_button_disabled {
background: #FFFFFF;
border: 1px solid #8C8C8C;
}

.radio_label_disabled {
font-family: Lato-Regular;
font-size: 14px;
color: #757575;
letter-spacing: 0;
}

Overview of CSS Classes

Selector
Summary
Parent Selector

.default

.selected

.disabled

.disabled-selected

summary needed

summary needed

summary needed

summary needed

.radio-button