Input field

On this page we will go through our Radio Button component

The input field allows the user to enter a piece of text. If the text is long it will stay on the same line. They can be used in forms, filters, lists etc. in many different ways like for passwords.

Table of contents

Overview

Each input field component is based on a global CSS class called “msds-input” and has to be inside a warpper using the “msds-input__icon-wrapper”. It is important to include them first as it is the main CSS class but. Without it, the UI of the component won’t work.

The input field is linked to a label element and should be placed right below it like the way it is shown below.

As other form fields, the input field layout contains a error message which is placed below the input field wrapper.

<form class="msds-forms">
    <div class="container">
        <div class="row">
            <div class="col-12 col-md-8">
                <div class="msds-input">
                    <div class="msds-input__icon-wrapper">
                        <input type="text" class="msds-input__text-input" placeholder="Enter your e-mail*" name="text-input-lg">
                        <label for="text-input-lg" class="msds-input__label">Enter your e-mail*</label>
                    </div>
                    <p class="msds-input__info-message">
                        We'll never share your email with anyone else.
                    </p>
                </div>
            </div>               
        </div>
    </div>
</form>

Sizes

The input field comes like most of our forms components in 2 sizes, large whichi is our default size and small used in specific cases.

<form class="msds-forms">
    <div class="container">
        <div class="row">            
            <div class="col-12 col-md-6">
                <h3>Large Size (default)</h3>
                <div class="msds-input">
                    <div class="msds-input__icon-wrapper">
                        <input type="text" class="msds-input__text-input" placeholder="Enter your e-mail*" name="text-input-lg">
                        <label for="text-input-lg" class="msds-input__label">Enter your e-mail*</label>
                    </div>
                    <p class="msds-input__info-message">
                        We'll never share your email with anyone else.
                    </p>
                </div>
            </div>
            <div class="col-12 col-md-6">
                <h3>Small Size</h3>
                <div class="msds-input msds-input--small">
                    <div class="msds-input__icon-wrapper">
                        <input type="text" class="msds-input__text-input" placeholder="Enter your e-mail*" name="text-input-sm">
                        <label for="text-input-sm" class="msds-input__label">Enter your e-mail*</label>
                    </div>
                    <p class="msds-input__info-message">
                        We'll never share your email with anyone else.
                    </p>
                </div>
            </div>            
        </div>
    </div>
</form>

States

The styling of states are defined in the CSS file. Some of the states can be triggered programmatically by setting the relative property to the input element.

Hover State

State of the hover input field

<form class="msds-forms">
    <div class="container">
        <div class="row">
            <div class="col-12 col-md-6">
                <div class="msds-input">
                    <div class="msds-input__icon-wrapper">
                        <input id="input-field-hover" type="text" class="msds-input__text-input" placeholder="Enter your name*" name="text-input-disabled-lg">
                        <label for="text-input-disabled-lg" class="msds-input__label">Enter your name*</label>
                    </div>
                    <p class="msds-input__info-message">
                        We'll never share your name to anyone.
                    </p>
                </div>
            </div>
            <div class="col-12 col-md-6">
                <div class="msds-input msds-input--small">
                    <div class="msds-input__icon-wrapper">
                        <input id="input-field-hover" type="text" class="msds-input__text-input" placeholder="Enter your name*" name="text-input-disabled-sm">
                        <label for="text-input-disabled-sm" class="msds-input__label">Enter your name*</label>
                    </div>
                    <p class="msds-input__info-message">
                        We'll never share your name to anyone.
                    </p>
                </div>
            </div>            
        </div>
    </div>
</form>

Focus State

State of the focused input field

<form class="msds-forms">
    <div class="container">
        <div class="row">
            <div class="col-12 col-md-6">
                <div class="msds-input">
                    <div class="msds-input__icon-wrapper">
                        <input id="input-field-focus" type="text" class="msds-input__text-input" placeholder="Enter your name*" name="text-input-disabled-lg">
                        <label for="text-input-disabled-lg" class="msds-input__label">Enter your name*</label>
                    </div>
                    <p class="msds-input__info-message">
                        We'll never share your name to anyone.
                    </p>
                </div>
            </div>
            <div class="col-12 col-md-6">
                <div class="msds-input msds-input--small">
                    <div class="msds-input__icon-wrapper">
                        <input id="input-field-focus" type="text" class="msds-input__text-input" placeholder="Enter your name*" name="text-input-disabled-sm">
                        <label for="text-input-disabled-sm" class="msds-input__label">Enter your name*</label>
                    </div>
                    <p class="msds-input__info-message">
                        We'll never share your name to anyone.
                    </p>
                </div>
            </div>            
        </div>
    </div>
</form>

Disabled State

It can be disabled programmatically by setting the “disabled” attribute to the input field element.

<form class="msds-forms">
    <div class="container">
        <div class="row">
            <div class="col-12 col-md-6">
                <div class="msds-input">
                    <div class="msds-input__icon-wrapper">
                        <input type="text" disabled="disabled" class="msds-input__text-input" placeholder="Enter your e-mail*" name="text-input-disabled-lg">
                        <label for="text-input-disabled-lg" class="msds-input__label">Enter your e-mail*</label>
                    </div>
                    <p class="msds-input__info-message">
                        We'll never share your email with anyone else.
                    </p>
                </div>
            </div>
            <div class="col-12 col-md-6">
                <div class="msds-input msds-input--small">
                    <div class="msds-input__icon-wrapper">
                        <input type="text" disabled="disabled" class="msds-input__text-input" placeholder="Enter your e-mail*" name="text-input-disabled-sm">
                        <label for="text-input-disabled-sm" class="msds-input__label">Enter your e-mail*</label>
                    </div>
                    <p class="msds-input__info-message">
                        We'll never share your email with anyone else.
                    </p>
                </div>
            </div>            
        </div>
    </div>
</form>

Readonly State

In order to use the read-only input fields, you need to add the “readonly” attribute to the input field element.

<form class="msds-forms">
    <div class="container">
        <div class="row">
            <div class="col-12 col-md-6">
                <div class="msds-input">
                    <div class="msds-input__icon-wrapper">
                        <input type="text" readonly="readonly" class="msds-input__text-input" placeholder="Enter your e-mail*" value="Readonly !" name="text-input-readonly-lg">
                        <label for="text-input-readonly-lg" class="msds-input__label">Enter your e-mail*</label>
                    </div>
                    <p class="msds-input__info-message">
                        We'll never share your email with anyone else.
                    </p>
                </div>
            </div>
            <div class="col-12 col-md-6">
                <div class="msds-input msds-input--small">
                    <div class="msds-input__icon-wrapper">
                        <input type="text" readonly="readonly" class="msds-input__text-input" placeholder="Enter your e-mail*" value="Readonly !" name="text-input-readonly-sm">
                        <label for="text-input-readonly-sm" class="msds-input__label">Enter your e-mail*</label>
                    </div>
                    <p class="msds-input__info-message">
                        We'll never share your email with anyone else.
                    </p>
                </div>
            </div>
        </div>
    </div>
</form>

Validations

The input field has 2 distincts validation styling. After entering a string, we will get either a success or error look and feel when the content is required or only an error if the content does not match the definition of a non required input field.

Validation Success

The validation success look and feel of the input field.

<form class="msds-forms">
    <div class="container">
        <div class="row">
            <div class="col-12 col-md-6">
                <div class="msds-input msds-input--success">
                    <div class="msds-input__icon-wrapper">
                        <input type="text" class="msds-input__text-input" placeholder="Enter your e-mail*" name="text-input-success-lg">
                        <label for="text-input-success-lg" class="msds-input__label">Enter your e-mail*</label>
                    </div>
                    <p class="msds-input__info-message">
                        Looks good!
                    </p>
                </div>
            </div>
            <div class="col-12 col-md-6">
                <div class="msds-input msds-input--small msds-input--success">
                    <div class="msds-input__icon-wrapper">
                        <input type="text" class="msds-input__text-input" placeholder="Enter your e-mail*" name="text-input-success-sm">
                        <label for="text-input-error-sm" class="msds-input__label">Enter your e-mail*</label>
                    </div>
                    <p class="msds-input__info-message">
                        Looks good!
                    </p>
                </div>
            </div>            
        </div>
    </div>
</form>

Validation Error

The validation error look and feel of the input field.

<form class="msds-forms">
    <div class="container">
        <div class="row">
            <div class="col-12 col-md-6">
                <div class="msds-input msds-input--error">
                    <div class="msds-input__icon-wrapper">
                        <input type="text" class="msds-input__text-input" placeholder="Enter your e-mail*" name="text-input-error-lg">
                        <label for="text-input-error-lg" class="msds-input__label">Enter your e-mail*</label>
                    </div>
                    <p class="msds-input__info-message">
                        You have entered and invalid email address. Please try again.
                    </p>
                </div>
            </div>
            <div class="col-12 col-md-6">
                <div class="msds-input msds-input--small msds-input--error">
                    <div class="msds-input__icon-wrapper">
                        <input type="text" class="msds-input__text-input" placeholder="Enter your e-mail*" name="text-input-error-sm">
                        <label for="text-input-error-sm" class="msds-input__label">Enter your e-mail*</label>
                    </div>
                    <p class="msds-input__info-message">
                        You have entered and invalid email address. Please try again.
                    </p>
                </div>
            </div>
        </div>
    </div>
</form>