Forms

All form element styles and interactions

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

%
.00

Text Area

250 characters remaining.
250 characters remaining.

Selects

Datepickers

Checkboxes and Radio Buttons

Helper Text & Required Fields

Use the asterisk to denote required fields. The required field indicator is not necessary if a form only has a single field. Helper text can be used to add additional clarity to the purpose of form field.

Denotes Required Field: *
The company name is the full text you have listed with the state you are registered in.
The company address 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
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
.00
This is a success message
.00
This is a warning message
.00
This is a danger message
250 characters remaining.
This is a success message
250 characters remaining.
This is a warning message
250 characters remaining.
This is a danger message
This is a success message
This is a warning message
This is a danger message

Toggles

Standard Size

ON OFF

Small Size

Sliders

Disclaimer: this markup does not provide screenreader support.

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