Components

Text Fields

Text fields allow our customer to enter, select, and search for text. Text inputs are used all throughout the Neon ecosystem and play a huge part in the how the product functions. Common text input types include: first name, last name, event title, emails, addresses, and plain text searches.

Text Field Default

Created with Sketch. Value Placeholder Text Input Label
Created with Sketch. Value Placeholder Text Input Label 6px 16px 8px 8px 8px 32px 271px 
.input-label-default{
font-family: Lato-Regular;
font-size: 13px;
color: #54698D;
}

.placeholder-default {
font-family: Lato-Regular;
font-size: 13px;
color: #C6CBD4;
line-height: 16px;
}


.field-box-default {
border: 1px solid #A8B7C7;
border-radius: 4px;
}

OPTIONAL -----

.value-default {
font-family: Lato-Regular;
font-size: 12px;
color: #54698D;
line-height: 15px;
}

icon
color: #C5D0DE
size: 12px
name: fa-info-circle

States

There are 5 different states for the text field inputs;

  • default
  • active
  • error
  • validated
  • disabled

Active

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

Created with Sketch. Input text Active Label 
.input-label-active{
font-family: Lato-Regular;
font-size: 13px;
color: #0074D9;
}

.placeholder-active {
font-family: Lato-Regular;
font-size: 13px;
color: #C6CBD4;
line-height: 16px;
}

.input-text {
font-family: Lato-Regular;
font-size: 13px;
color: #0024D1;
line-height: 16px;
}


.field-box-active {
border: 1px solid #0074d9;
border-radius: 4px;
}

Error

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

Created with Sketch. This Field is Incorrect * Error Label 
.input-label-error{
font-family: Lato-Regular;
font-size: 13px;
color: #DC143C;
}


.field-box-error {
border: 1px solid #DC143C;
border-radius: 4px;
}

OPTIONAL -----

.value-error {
font-family: Lato-Regular;
font-size: 12px;
color: #DC143C;
line-height: 15px;
}

icon - error
color: #DC143C
size: 12px
name: fa-info-circle

Validated

This validation variant will only appear when a field is required and the user's entry has met the conditions for the input.  Most often seen for first name, last name, email, and credit card information.

Created with Sketch. Validated Placeholder Text *Input Label 
.input-label-error{
font-family: Lato-Regular;
font-size: 13px;
color: #008000;
}


.field-box-error {
border: 1px solid #008000;
border-radius: 4px;
}

OPTIONAL -----

.value-error {
font-family: Lato-Regular;
font-size: 12px;
color: #008000;
line-height: 15px;
}

icon - validated
color: #008000
size: 12px
name: fa-check-circle

Disabled

This validation variant will only appear when a field is required and the user's entry has met the conditions for the input.  Most often seen for first name, last name, email, and credit card information.

Default 
.input-label-disabled{
opacity:: 50%;
font-family: Lato-Regular;
font-size: 13px;
color: #54698D;
}

.placeholder-disabled {
opacity:: 50%;
font-family: Lato-Regular;
font-size: 13px;
color: #C6CBD4;
line-height: 16px;
}


.field-box-disabled {
opacity:: 50%;
background-color::#E0E5EE;
border: 1px solid #A8B7C7;
border-radius: 4px;
}

Overview of CSS Classes

Selector
Summary
Parent Selector

.input-label-default

.placehoder-default

.field-box-defualt

.value-default

.icon-default

.input-label-active

.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