Sign In

Form Elements

Accessibility and Visibility

Forms elements are among the most interacted elements in our product.  They are the number one way our user communicates their needs and requests to our system.  For that reason, it is very important some basic guidelines are followed when in use.

Design Considerations

  1. All text inputs, require a descriptive placeholder.  This is so the element does not appear blank or inaccessible.
  2. All select elements require a placeholder that is not selectable. If no value is provided by the user the descriptive placeholder should guide the user to what type of data is available for selection.
  3. If a checkbox or radio, input has a label, clicking the label should also select the checkbox or radio.
  4. At this time we do not place any input,textarea, checkboxes, or radios against dark backgrounds.  We do not have a pattern for this type of contrast so it is best to place your form elements against a white background.

Form Input Styles

show
%
.00

Text Area

250 characters remaining.
250 characters remaining.

Selects

Checkboxes and Radio Buttons

Date Pickers

Helper Text and Required Fields

Denotes Required Field: *
The company name is the full text you have listed with the state you are registered in.
The company addresss is the address you have listed with the state you are registered in for your company name
The Employer Identification Number (EIN), also known as the Federal Employer Identification Number (FEIN) or the Federal Tax Identification Number, is a unique nine-digit number assigned by the Internal Revenue Service (IRS) to business entities operating in the United States for the purposes of identification

Validation States & Messaging

Text Validations
This is a success message
This is a warning message
This is a danger message
show
This is a success message
show
This is a warning message
show
This is a danger message
This is a success message
This is a warning message
This is a danger message
This is a success message
This is a warning message
This is a danger message
.00
This is a success message
.00
This is a warning message
.00
This is a danger message
Text Area Validation
This is a success message.
This is a warning.
This is an error!
Select Validations
Checkbox Validations
There was an Issue
There was an Error

Toggles

Standard Size
ON OFF
Small Size

Sliders

Inline Forms

Add people to this project
Enabled Disabled

I-Bubbles

I-bubbles can be placed at the end of a form element or next to the labels themselves, depending on the layout of the form.
We support three different I-bubble displays to support different types of content.

Modal Displays
Time Entry Method
Time Unit
Popover Displays
Tooltip Displays