Text inputs are used for freeform data entry.
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.
We can include a small button below the input to let users add a new value.
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.
This small component conformed of a text input and a button can be used in actions like saving file names.
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.
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 -->
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.
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.
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.
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.