Inputs

Overview

Text inputs are used for freeform data entry.

Field component

They should always (or almost always) be paired with a <label> element with the for="" attribute pointing to the input id. Field placeholders should show an example of the expected input, such as suggested search terms or a demonstration of a correctly formatted email address.

Add new option

We can include a small button below the input to let users add a new value.

Don’t

Don’t use the placeholder attribute as a substitute for a label. It’s a misuse of the attribute and leaves you with an inaccessible, unlabeled field.

Input field with button

This small component conformed of a text input and a button can be used in actions like saving file names.

Input buttons

To improve the speed and clarity of filling forms we use a button style variant for checkboxes and radio inputs. A styled input that communicates if an option is being added to a group.

Checkbox

The ability to style checkboxes with CSS varies across browsers. To ensure that checkboxes look the same everywhere, we use a custom DOM. Pay close attention to the markup, because all elements must exist for the styles to work.

<!-- Input button outline starts -->
<span class="c-input--btn-outline">
  <input type="checkbox" id="example">
  <label class="c-btn c-btn--outline" for="example">Label text</label>
</span>
<!-- Input button outline ends -->

Radio

The radio inputs work with the same markup, by changing the input type checkbox to radio the behavior changes and the style stays the same.

Sub-options

For extra options when a specific choice has been made we use a small container underneath to represent the relation between the chosen item and the multi-option component.

Type origin company
Type destination company
Type origin facility

Power select plugin

The power select plugin is heavily used across the entire application, it has a search and filtering built-in and comes with the single and multi-select variant.

  • × Sucker Rod
  • × Rod Coupling
  • × Tubing

Range input

This input provides a visual indication of adjustable content, where the user can move the handle along a horizontal track to increase or decrease the value.

The slider in its basic form should be accompanied by a label and a number input that doubles as a display for the slider’s current value. They should be used for selecting a specific value within a value range.