EvoToolkit - v3.0.0 (Changelog)

Text Inputs

Standard text input component, which can be extended and modified to fit a variety of roles.



Luke Harrison
  • Overview
  • Options
  • Theming

Table of contents



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.

<div class='c-input'> <label class='c-input__label' for='name-field'>Your name</label> <div class='c-input__wrapper'> <input type='text' class='c-input__field' id='name-field' name='name' /> </div> </div>


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.

<div class='c-input'> <label class='c-input__label' for='message-field'>Your message</label> <div class='c-input__wrapper'> <textarea class='c-input__field' id='message-field' name='message' rows='5'></textarea> </div> </div>


Can be extended by adding a c-input__text element to display supporting information relating to the input.

This can be changed after approval.
<div class='c-input u-mb-regular'> <label class='c-input__label' for='borrow-field'>How much would you like to borrow?</label> <div class='c-input__wrapper'> <input type='text' class='c-input__field' id='borrow-field' name='borrow' /> </div> <div class='c-input__text'>This can be changed after approval.</div> </div>

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.

<div class='c-input u-mb-regular'> <label class='c-input__label' for='movie-field'>Your Favourite Movie</label> <div class='c-input__wrapper'> <input type='text' class='c-input__field' id='movie-field' name='movie' maxlength="15" /> </div> <div class="c-input__length"> <div class="c-input__length-bar"></div> <div class="c-input__length-text"></div> </div> </div> <div class="c-input"> <label class="c-input__label" for="max-message-field">Your message</label> <div class="c-input__wrapper"> <textarea class="c-input__field" id="max-message-field" name="max-message" rows="5" maxlength="100"></textarea> </div> <div class="c-input__length"> <div class="c-input__length-bar"></div> <div class="c-input__length-text"></div> </div> </div>


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.

<form> <div class='c-input js-input u-mb-small'> <label class='c-input__label' for='search-field'>Where do you want to go?</label> <div class='c-input__wrapper'> <input type='tel' class='c-input__field' id='search-field' name='search' inputmode='numeric' pattern='^(01|02|03|07)[0-9]{9}' data-patternmismatch='Please enter a contact number with 11 numbers which begins with either 01, 02, 03 or 07.' required data-valuemissing='Please enter a contact number' /> </div> </div> <button class='c-button'>Submit</button> </form>


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

<div class="c-input c-input--suffix"> <label class="c-input__label" for="password-field">Your password</label> <div class="c-input__wrapper"> <input type="password" class="c-input__field" id="password-field" name="password"> <div class="c-input__suffix c-input__suffix--simple c-input__password-icon"> <button class="c-button c-button--tiny c-input__password-icon__button u-theme-lighter" type="button"> <svg class="c-button__icon c-button__icon--large c-button__icon--left"> <use xlink:href="/static/img/evotoolkit-a9f6d11dc7.svg#eye"></use> <use xlink:href="/static/img/evotoolkit-a9f6d11dc7.svg#eye-line" class="c-input__password-icon-line"></use> </svg> <span class="c-input__password-icon-label">Show</span> </button> </div> </div> </div>


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.


The input has support for the button component, and slots it neatly into place when a c-input__button BEM mix class is added.

<div class='c-input'> <label class='c-input__label' for='mix-button-field'>Where do you want to go?</label> <div class='c-input__wrapper'> <input type='text' class='c-input__field' id='mix-button-field' name='mix-button' /> </div> <button class='c-button c-button--small c-input__button'>Search</button> </div>


A c-input__tooltip mix class is available for the tooltip component, and should contain the component as a child element.

Hello, I'm a tooltip message. This is where information is displayed which may help the user.
<div class='c-input'> <label class='c-input__label' for='policy-field'>About your policy</label> <div class='c-input__wrapper'> <input type='text' class='c-input__field' id='policy-field' name='policy' /> </div> <div class='c-input__tooltip'> <div class="c-tooltip c-tooltip--right"> <div class="c-tooltip__icon" tabindex="0"><svg><use xlink:href="/static/img/evotoolkit-a9f6d11dc7.svg#info"></use></svg></div> <div class="c-tooltip__message"> Hello, I'm a tooltip message. This is where information is displayed which may help the user. </div> </div> </div> </div>


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.


Size variants of the standard text input.

<div class='c-input u-mb-regular'> <label class='c-input__label' for='regular-field'>I'm a regular input</label> <div class='c-input__wrapper'> <input type='text' class='c-input__field' id='regular-field' name='regular' /> </div> </div> <div class='c-input c-input--large'> <label class='c-type-foxtrot c-input__label' for='large-field'>I'm a large input</label> <div class='c-input__wrapper'> <input type='text' class='c-input__field' id='large-field' name='large' /> </div> </div>

Joined Button

When used in conjunction with the button component as a mix element, joins them together visually.

<div class='c-input c-input--joined-button'> <label class='c-input__label' for='joined-button-field'>Where do you want to go?</label> <div class='c-input__wrapper'> <input type='tel' class='c-input__field' id='joined-button-field' name='joined-button' /> </div> <button class='c-button c-button--small c-input__button'>Submit</button> </div>


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).

<div class='c-input c-input--prefix u-mb-regular'> <label class='c-input__label' for='where-field'>Where do you want to go?</label> <div class='c-input__wrapper'> <div class='c-input__prefix'> <svg class='c-input__icon'><use xlink:href="/static/img/evotoolkit-a9f6d11dc7.svg#test-icon" /></svg> </div> <input type='tel' class='c-input__field' id='where-field' name='where' /> </div> </div> <div class='c-input c-input--prefix'> <label class='c-input__label' for='where-2-field'>Where do you want to go?</label> <div class='c-input__wrapper'> <div class='c-input__prefix c-input__prefix--simple'> <svg class='c-input__icon'><use xlink:href="/static/img/evotoolkit-a9f6d11dc7.svg#test-icon" /></svg> </div> <input type='tel' class='c-input__field' id='where-2-field' name='where-2' /> </div> </div>


Works exactly the same as the previous prefix modifier, but reversed.

<div class='c-input c-input--suffix u-mb-regular'> <label class='c-input__label' for='where-3-field'>Where do you want to go?</label> <div class='c-input__wrapper'> <div class='c-input__suffix'> <svg class='c-input__icon'><use xlink:href="/static/img/evotoolkit-a9f6d11dc7.svg#test-icon" /></svg> </div> <input type='tel' class='c-input__field' id='where-3-field' name='where-3' /> </div> </div> <div class='c-input c-input--suffix'> <label class='c-input__label' for='where-4-field'>Where do you want to go?</label> <div class='c-input__wrapper'> <div class='c-input__suffix c-input__suffix--simple'> <svg class='c-input__icon'><use xlink:href="/static/img/evotoolkit-a9f6d11dc7.svg#test-icon" /></svg> </div> <input type='tel' class='c-input__field' id='where-4-field' name='where-4' /> </div> </div>

Left Label

Forces the label and input to be on the same row. Use if you have limited vertical space available.

<div class='c-input c-input--left-label'> <label class='c-input__label' for='left-label-field'>Your name</label> <div class='c-input__wrapper'> <input type='text' class='c-input__field' id='left-label-field' name='left-label' /> </div> </div>


An inverted variant of the input which makes it more visible on darker backgrounds.

<div class='c-input c-input--invert u-mb-regular'> <label class='c-input__label' for='invert-field'>Your name</label> <div class='c-input__wrapper'> <input type='text' class='c-input__field' id='invert-field' name='invert' /> </div> </div> <div class='c-input c-input--prefix c-input--invert'> <label class='c-input__label' for='invert-2-field'>Your name</label> <div class='c-input__wrapper'> <div class='c-input__prefix'> <svg class='c-input__icon'><use xlink:href="/static/img/evotoolkit-a9f6d11dc7.svg#test-icon" /></svg> </div> <input type='text' class='c-input__field' id='invert-2-field' name='invert-2' /> </div> </div>


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).


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.

<div class='c-input is-disabled'> <label class='c-input__label' for='disabled-field'>Your name</label> <div class='c-input__wrapper'> <input type='text' class='c-input__field' id='disabled-field' name='disabled' /> </div> </div>


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.

<div class='c-input is-negative'> <label class='c-input__label' for='error-field'>Your name</label> <div class='c-input__wrapper'> <input type='text' class='c-input__field' id='error-field' name='error' /> </div> </div>

You can modify the text inputs component by overriding certain JavaScript functionality through HTML data-attributes.


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 data-auto-tab

Allows you to specify another input (using its name attribute) to trigger focus when the value of themaxlength attribute is hit (For text inputs), or the length of the max attribute (for number fields) is equal to the number of characters in the input value.

<div class="o-layout"> <div class="o-layout__item u-width-full u-mb-tiny"> <label class="c-type--bold" for="dob-day-field">Date of birth</label> </div> <div class="o-layout__item"> <div class="c-input" data-auto-tab="dob-month"> <label class="c-input__label" for="dob-day-field">Day</label> <div class="c-input__wrapper"> <input type="number" class="c-input__field" id="dob-day-field" name="dob-day" max="31" placeholder="DD"> </div> </div> </div> <div class="o-layout__item"> <div class="c-input" data-auto-tab="dob-year"> <label class="c-input__label" for="dob-month-field">Month</label> <div class="c-input__wrapper"> <input type="number" class="c-input__field" id="dob-month-field" name="dob-month" max="12" placeholder="MM"> </div> </div> </div> <div class="o-layout__item"> <div class="c-input"> <label class="c-input__label" for="dob-year-field">Year</label> <div class="c-input__wrapper"> <input type="number" class="c-input__field" id="dob-year-field" name="dob-year" min="1900" max="2019" placeholder="YYYY"> </div> </div> </div> </div>

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