Standard text input component, which can be extended and modified to fit a variety of roles.
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.
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.
Can be extended by adding a
c-input__text element to display supporting information relating to the input.
Inputs and textareas support a
c-input__length element, which tracks how many characters the user has remaining from the elements
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.
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.
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.
c-input__tooltip mix class is available for the tooltip component, and should contain the component as a child element.
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.
When used in conjunction with the button component as a mix element, joins them together visually.
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).
Works exactly the same as the previous prefix modifier, but reversed.
Forces the label and input to be on the same row. Use if you have limited vertical space available.
An inverted variant of the input which makes it more visible on darker backgrounds.
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
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
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
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:-
Allows you to specify another input (using its
<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.