Text Inputs
Standard text input component, which can be extended and modified to fit a variety of roles.
Source
Contributors
- Overview
- Options
- Methods
- Theming
Table of contents
Base
Mixes
Modifiers
States
Base
Standard
The default form of the text input component. This example shows a text type input, but this can be set to any valid HTML5 input type.
Textarea
Example of a textarea variant of the input text component. The row attribute determines it's initial height, and should be set to an appropriate value.
Note: Due to it's height differences with other component variants, this isn't really suited to most modifiers or mixes.
Message
Can be extended by adding a c-input__text element to display supporting information relating to the input.
Length Bar
Inputs and textareas support a c-input__length element, which tracks how many characters the user has remaining from the elements maxlength attribute.
Validation
Support for HTML5 validation is also built in, which you can ready a good introduction to here.
Error messages can be customized for all the different types of errors available in the inputs validity object by simply adding them as a data tag followed by the error message, as seen in the example below.
Password
With a password input, research shows that having a way to toggle between hidden passwords (eg:- ●●●●●●●) and plaintext passwords (eg:- pass123), improves the usability of the component, as it helps prevent mistypes, especially in cases with strict password requirements (eg:- Password needs an uppercase letter, number, and the name of the 5th english king)
This uses the Suffix modifier, so it must be enabled first before this can display correctly.
Related Readings
File Upload
Mixes
Mixes refer to new variants of the Text Inputs component which are created by including other components within it, with a few new styles added to make them fit better.
Here are all the mixes where the Text Inputs is the parent component.
ButtonView
The input has support for the button component, and slots it neatly into place when a c-input__button BEM mix class is added.
TooltipView
A c-input__tooltip mix class is available for the tooltip component, and should contain the component as a child element.
Modifiers
A list of modifiers for the text inputs component, allowing you to change its appearance to fit a variety of roles and scenarios.
Modifiers can typically be combined to achieve the desired appearance, unless stated otherwise.
Sizes
Size variants of the standard text input.
Joined Button
When used in conjunction with the button component as a mix element, joins them together visually.
Prefix
Adding the c-input--prefix modifier class, you can add a c-input__prefix element which allows you to add additional content to the input. This space could be used for contextual information such as icons (Eg: a silhouette for username) or currency information (£ sign).
Suffix
Works exactly the same as the previous prefix modifier, but reversed.
Left Label
Forces the label and input to be on the same row. Use if you have limited vertical space available.
Invert
An inverted variant of the input which makes it more visible on darker backgrounds.
States
This text inputs component has multiple states available. These can also be combined with any combination of modifiers, unless stated otherwise.
Most states are also activated when a parent component has the same state applied. For example, if a fieldset element is disabled or has an is-disabled class, this will also activate the disabled state for all its child components with states available.
This behaviour can be disabled by adding a --disable-state-inheritance modifier class to the element inheriting the state (For example, for c-button, the class would be c-button--disable-state-inheritance).
Disabled
To be used if the component needs to be disabled. This state can also be activated if the component is a child of a disabled component, or a child of a component with the is-disabled class.
Error
Use this state if the user needs to be alerted that the inputs content is incorrect. Typically used in conjunction with a validation system. Like with disabled state, this state can also be activated if the component is a child of a error component, or a child of a component with the is-negative class.
You can modify the text inputs component by overriding certain JavaScript functionality through HTML data-attributes.
JavaScript
You can modify text inputs component functionality by adding the below data attribute. Unless stated otherwise, these must be placed on the top level block component (eg:- c-calendar)
| Name | |
|---|---|
| Name |
data-auto-tab
|
| Description | |
| Description |
Allows you to specify another input (using its |
| Default | |
| Example | |
| Example |
|
This component has methods which allow you to programatically trigger actions. You can trigger these using the evo() selector.
See JavaScript API for more information and a list of shared, global methods.
setError
Activates error state
// Grab references to the top level block element, and also the input itself
const inputComponent = document.querySelector('.c-input');
const formElement = inputComponent.querySelector('input');
// Set a custom error message
formElement.setCustomValidity('My custom error');
// Add error state, which will use the custom error message
evo(inputComponent).checkbox('setError');
removeError
Removes error state
// Grab references to the top level block element, and also the input itself
const inputComponent = document.querySelector('.c-input');
const formElement = inputComponent.querySelector('input');
// Clear custom error message
formElement.setCustomValidity('');
// Remove error state
evo(inputComponent).checkbox('removeError');
You can theme the text inputs component to make it fit your brand. For more information on theming EvoToolkit, please see Configuring EvoToolkit.
Below is a list of theme variables and their default values.
Theme Variables
| Theme Variables | Default |
|---|---|
$component-input-focus-color |
primary |
$component-input-border-color |
light |
$component-input-disabled-background-color |
very-light |
$component-input-box-color |
very-light |
$component-input-disabled-text-color |
light |
$component-input-calendar-box-border-color |
primary |