EvoToolkit - v2.3.0 (Changelog)

Text Inputs

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

Source

Contributors

Luke Harrison

Dependencies
This part requires one or more other parts to display properly. If this is enabled and a dependency isn't, it will automatically be imported.

  • Overview
  • Options
  • Theming

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.

<div class='c-input'> <label class='c-type-foxtrot 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 the dropdown variant of the text input component, which requires a few extra elements present.

<div class='c-input'> <label class='c-type-foxtrot c-input__label' for='dropdown-field'>Do you understand?</label> <div class='c-input__wrapper'> <select id='dropdown-field' name='dropdown' class='c-input__field' /> <option value='yes'>Yes</option> <option value='no'>No</option> <option value='i-dont-know'>I don't know</option> <option value='repeat'>Could you repeat the question?</option> </select> <svg class='c-input__arrow'><use xlink:href="#arrow" /></svg> </div> </div>

This component requires an icon, so copy the below symbol into your root svg element If using EvoToolkit boilerplate, this is the empty <svg> just after the opening <body>. . You can also download the SVG directly for use in design apps.

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.

<div class='c-input'> <label class='c-type-foxtrot 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>

Message

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-margin-bottom-regular'> <label class='c-type-foxtrot 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-margin-bottom-regular'> <label class='c-type-foxtrot 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-type-foxtrot 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>

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.

<form> <div class='c-input js-input u-margin-bottom-small'> <label class='c-type-foxtrot 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>

PasswordDisabled

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

This is disabled by default. Enable block variable $component-input-box-modifiers or add to class filter in your page SASS manifest to enable locally (For that page), or overrides.scss to enable globally. (More info)

<div class="c-input c-input--suffix"> <label class="c-type-foxtrot 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"> <svg class="c-button__icon c-button__icon--large c-button__icon--left"> <use xlink:href="#eye"></use> <use xlink:href="#eye-line" class="c-input__password-icon-line"></use> </svg> <span class="c-input__password-icon-label">Show</span> </button> </div> </div> </div>

This component requires an icon, so copy the below symbol into your root svg element If using EvoToolkit boilerplate, this is the empty <svg> just after the opening <body>. . You can also download the SVG directly for use in design apps.

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.

<div class='c-input'> <label class='c-type-foxtrot 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-input__button'>Search</button> </div>

TooltipView

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-type-foxtrot 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="#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>

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.

Joined ButtonDisabled

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

This is disabled by default. Enable block variable $component-input-joined-button-modifier or add to class filter in your page SASS manifest to enable locally (For that page), or overrides.scss to enable globally. (More info)

<div class='c-input c-input--joined-button'> <label class='c-type-foxtrot 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-input__button'>Submit</button> </div>

PrefixDisabled

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

This is disabled by default. Enable block variable $component-input-box-modifiers or add to class filter in your page SASS manifest to enable locally (For that page), or overrides.scss to enable globally. (More info)

<div class='c-input c-input--prefix u-margin-bottom-regular'> <label class='c-type-foxtrot 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="#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-type-foxtrot 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="#test-icon" /></svg> </div> <input type='tel' class='c-input__field' id='where-2-field' name='where-2' /> </div> </div>

SuffixDisabled

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

This is disabled by default. Enable block variable $component-input-box-modifiers or add to class filter in your page SASS manifest to enable locally (For that page), or overrides.scss to enable globally. (More info)

<div class='c-input c-input--suffix u-margin-bottom-regular'> <label class='c-type-foxtrot 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="#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-type-foxtrot 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="#test-icon" /></svg> </div> <input type='tel' class='c-input__field' id='where-4-field' name='where-4' /> </div> </div>

Left LabelDisabled

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

This is disabled by default. Enable block variable $component-left-label-modifier or add to class filter in your page SASS manifest to enable locally (For that page), or overrides.scss to enable globally. (More info)

<div class='c-input c-input--left-label'> <label class='c-type-foxtrot 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>

InvertDisabled

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

This is disabled by default. Enable block variable $component-input-invert-modifier or add to class filter in your page SASS manifest to enable locally (For that page), or overrides.scss to enable globally. (More info)

<div class='c-input c-input--invert u-margin-bottom-regular'> <label class='c-type-foxtrot 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-type-foxtrot 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="#test-icon" /></svg> </div> <input type='text' class='c-input__field' id='invert-2-field' name='invert-2' /> </div> </div>

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.

<div class='c-input is-disabled'> <label class='c-type-foxtrot 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>

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.

<div class='c-input is-negative'> <label class='c-type-foxtrot 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 customize 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 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.

Default
Example
Example
<div class="o-layout"> <div class="o-layout__item u-width-full u-margin-bottom-tiny"> <label class="c-type-foxtrot 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