Design
Implementation

Textfield - Design

Textfields are used in places where text input from a user is required.

 

Live Demo

Go to Code See in Page
 

Usage

Because textfields are used to collect input from a user, they should be very noticeable so as to lead the user into completing them. In order to make them noticeable, they should stand out and indicate that not only can a user input information there, but also what information should be put into the textfield. When a textfield is focused by a user, it should be differentiated from the surrounding textfields by changing the styling in some manner.

There are two types of textfield, basic and outlined. The type you use depends on the context of the textfield. In most cases you should be using an outlined textfield, as it is the most noticeable type. You should also avoid mixing the types in close proximity, using either all outlined or all basic.

Do: Use the same type in groups
Dont: Mix types
 

Anatomy

1. Label
2. Text area
3. Container
4. Icon

 

Behavior

The behavior of a textfield is simple. The border becomes thicker when hovered over, and the border and label text color change to blue. Textfields stretch horizontally to fill their container, and their height never changes.

Textfield - Implementation

Textfields are used in places where text input from a user is required.

 

Basic Textfield HTML

This is the implementation you would use for a basic textfield. This is a textfield with no modifiers, so there is no outline or icon. Because there is no background fill for this textfield, there is less visual emphasis and it should therefore be used in less important places. If the textfield is important, consider using a variation such as outlined. Below the HTML is an example of what this would produce. 

<div class="textfield">
    <input id="text-1" type="text" name="text-1" aria-errormessage="text-1-error-message" aria-labelledby="text-1-label" aria-invalid="true" class="textfield__native-control">
    <label id="text-1-label" for="text-1" class="textfield__label">Text</label>
    <div role="alert" aria-live="assertive" id="text-1-error-message" class="textfield__message"></div>
</div>

There are some attributes here that you might not be familiar with. Anything beginning with "aria" has to do with accessibility. "aria-errormessage", for example, links the input tag with the alert of the matching id. It is important to include these attributes because it not only makes the website more usable for those with disabilities, but it also increases the SEO of the page, which is important for the company.

Basic Textfield CSS

.textfield {
    position: relative;
    display: flex;
    flex-flow: row wrap;
    margin: 0 0 8px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.textfield__label,
.textfield__native-control,
.textfield__message {
    flex: 0 0 100%;
}

.textfield__native-control {
    outline: none;
    color: #212121;
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.04em;
    width: 100%;
    height: 48px;
    padding: 0 8px;
    border: none;
    background: none;
    font-size: inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: border 150ms cubic-bezier(0.4, 0, 0.2, 1);
    will-change: border;
}   
.textfield:not(.textfield--outline) .textfield__native-control {
    padding: 15px 0 6px;
    transition: border-bottom-color 180ms cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    border-bottom: 1px solid #6d6565;
}

.textfield:not(.textfield--outline) .textfield__native-control:hover {
    border-color: #000;
    box-shadow: inset 0 -8px 0px -7px #000;
}

.textfield:not(.textfield--outline) .textfield__native-control:focus {
    border-color: #2451b2;
    box-shadow: inset 0 -8px 0px -7px #2451b2;
}

.textfield__label {
    font-size: 15px;
    color: #212121;
    margin: 0 0 4px;
    font-weight: 500;
    line-height: 1;
    cursor: text;
}
.textfield__native-control + .textfield__label {
    position: absolute;
    color: #6d6e71;
    top: 4px;
    left: 0;
    font-size: 12px;
    margin: 0;
}

.textfield .textfield__native-control:focus + .textfield__label {
    color: #2451b2;
}

.textfield__message {
    font-size: 12px;
    font-style: italic;
    line-height: 1.6;
    color: #212121;
    margin: 0;
}
 

Outlined Textfield HTML

Outlined textfields are filled and outlined, which gives them more visual emphasis. Use these in places that are important, such as an input for account information (first name, last name, etc). Below is what the HTML and CSS would look like to implement this variation, as well as an example of what it would look like. 

<div class="textfield textfield--outline">
    <input id="text-1" type="text" name="text-1" aria-errormessage="text-1-error-message" aria-labelledby="text-1-label" aria-invalid="true" class="textfield__native-control">
    <label id="text-1-label" for="text-1" class="textfield__label">Text</label>
    <div role="alert" aria-live="assertive" id="text-1-error-message" class="textfield__message"></div>
</div>
.textfield {
    position: relative;
    display: flex;
    flex-flow: row wrap;
    margin: 0 0 8px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.textfield__label,
.textfield__native-control,
.textfield__message {
    flex: 0 0 100%;
}

.textfield__native-control {
    outline: none;
    color: #212121;
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.04em;
    width: 100%;
    height: 48px;
    padding: 0 8px;
    border: none;
    background: none;
    font-size: inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: border 150ms cubic-bezier(0.4, 0, 0.2, 1);
    will-change: border;
}   
.textfield--outline {
    transition: background-color 500ms cubic-bezier(0.4, 0, 0.2, 1);
}
.textfield--outline .textfield__native-control {
    background-color: #fff;
    border: 1px solid;
    border-color: #949499;
    border-radius: 3px;
}
.textfield--outline .textfield__native-control:hover {
    border-color: #000;
    box-shadow: inset 0 0 0 1px #000;
}

.textfield--outline .textfield__native-control:focus {
    border-color: #3367d6 #285bc7 #2451b2;
    box-shadow: inset 0 0 0 1px #2451b2;
}
.textfield--outline .textfield__label {
    left: 8px;
}

.textfield__label {
    font-size: 15px;
    color: #212121;
    margin: 0 0 4px;
    font-weight: 500;
    line-height: 1;
    cursor: text;
}
.textfield__native-control + .textfield__label {
    position: absolute;
    color: #6d6e71;
    top: 4px;
    left: 0;
    font-size: 12px;
    margin: 0;
}

.textfield .textfield__native-control:focus + .textfield__label {
    color: #2451b2;
}

.textfield__message {
    font-size: 12px;
    font-style: italic;
    line-height: 1.6;
    color: #212121;
    margin: 0;
}
 

Trailing Icon HTML

The trailing icon modifier should be used when there needs to be some kind of icon shown with the textfield. Example being a password field. This modifier can be used on both a basic textfield and an outlined textfield. The icon used should be an svg, and not and img. Below is what the HTML and CSS would look like to implement this variation, as well as an example of what it would produce when used on a basic textfield. 

<div class="textfield textfield--with-trailing-icon">
    <input id="text-1" type="text" name="text-1" aria-errormessage="text-1-error-message" aria-labelledby="text-1-label" aria-invalid="true" class="textfield__native-control">
    <label id="text-1-label" for="text-1" class="textfield__label">Text</label>
    <div class="textfield__trailing-icon">
        <svg class="icon" role="presentation" focusable="false" viewBox="0 0 24 24">
            <path d="M12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9M12,4.5C17,4.5 21.27,7.61 23,12C21.27,16.39 17,19.5 12,19.5C7,19.5 2.73,16.39 1,12C2.73,7.61 7,4.5 12,4.5M3.18,12C4.83,15.36 8.24,17.5 12,17.5C15.76,17.5 19.17,15.36 20.82,12C19.17,8.64 15.76,6.5 12,6.5C8.24,6.5 4.83,8.64 3.18,12Z" />
        </svg>
    </div>
    <div role="alert" aria-live="assertive" id="text-1-error-message" class="textfield__message"></div>
</div>
.textfield {
    position: relative;
    display: flex;
    flex-flow: row wrap;
    margin: 0 0 8px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.textfield__label,
.textfield__native-control,
.textfield__message {
    flex: 0 0 100%;
}

.textfield__native-control {
    outline: none;
    color: #212121;
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.04em;
    width: 100%;
    height: 48px;
    padding: 0 8px;
    border: none;
    background: none;
    font-size: inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: border 150ms cubic-bezier(0.4, 0, 0.2, 1);
    will-change: border;
}   
.textfield:not(.textfield--outline) .textfield__native-control {
    padding: 15px 0 6px;
    transition: border-bottom-color 180ms cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    border-bottom: 1px solid #6d6565;
}

.textfield:not(.textfield--outline) .textfield__native-control:hover {
    border-color: #000;
    box-shadow: inset 0 -8px 0px -7px #000;
}

.textfield:not(.textfield--outline) .textfield__native-control:focus {
    border-color: #2451b2;
    box-shadow: inset 0 -8px 0px -7px #2451b2;
}

.textfield__label {
    font-size: 15px;
    color: #212121;
    margin: 0 0 4px;
    font-weight: 500;
    line-height: 1;
    cursor: text;
}
.textfield__native-control + .textfield__label {
    position: absolute;
    color: #6d6e71;
    top: 4px;
    left: 0;
    font-size: 12px;
    margin: 0;
}

.textfield .textfield__native-control:focus + .textfield__label {
    color: #2451b2;
}

.textfield__message {
    font-size: 12px;
    font-style: italic;
    line-height: 1.6;
    color: #212121;
    margin: 0;
}
.textfield.textfield--with-trailing-icon {
    padding-right: 48px;
}

.textfield__trailing-icon {
    position: absolute;
    top: 0;
    right: 0;
    height: 48px;
    width: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.textfield__trailing-icon .icon {
    width: 24px;
    height: 24px;
    fill: #212121;
}
 

All CSS for Textfields and their Modifiers

.textfield {
    position: relative;
    display: flex;
    flex-flow: row wrap;
    margin: 0 0 8px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Helvetica, Arial, sans-serif, "Apple Color Emoji",
        "Segoe UI Emoji", "Segoe UI Symbol";
}

.textfield--outline {
    transition: background-color 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

.textfield__label,
.textfield__native-control,
.textfield__message {
    flex: 0 0 100%;
}

.textfield__native-control {
    outline: none;
    color: #212121;
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.04em;
    width: 100%;
    height: 48px;
    padding: 0 8px;
    border: none;
    background: none;
    font-size: inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: border 150ms cubic-bezier(0.4, 0, 0.2, 1);
    will-change: border;
}

.textfield--outline .textfield__native-control {
    background-color: #fff;
    border: 1px solid;
    border-color: #949499;
    border-radius: 3px;
}

.textfield--outline .textfield__native-control:hover {
    border-color: #000;
    box-shadow: inset 0 0 0 1px #000;
}

.textfield--outline .textfield__native-control:focus {
    border-color: #3367d6 #285bc7 #2451b2;
    box-shadow: inset 0 0 0 1px #2451b2;
}

.textfield:not(.textfield--outline) .textfield__native-control {
    padding: 15px 0 6px;
    transition: border-bottom-color 180ms cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    border-bottom: 1px solid #6d6565;
}

.textfield:not(.textfield--outline) .textfield__native-control:hover {
    border-color: #000;
    box-shadow: inset 0 -8px 0px -7px #000;
}

.textfield:not(.textfield--outline) .textfield__native-control:focus {
    border-color: #2451b2;
    box-shadow: inset 0 -8px 0px -7px #2451b2;
}

.textfield__label {
    font-size: 15px;
    color: #212121;
    margin: 0 0 4px;
    font-weight: 500;
    line-height: 1;
    cursor: text;
}

.textfield__native-control + .textfield__label {
    position: absolute;
    color: #6d6e71;
    top: 4px;
    left: 0;
    font-size: 12px;
    margin: 0;
}

.textfield--outline .textfield__label {
    left: 8px;
}

.textfield .textfield__native-control:focus + .textfield__label {
    color: #2451b2;
}

.textfield.textfield--with-trailing-icon {
    padding-right: 48px;
}

.textfield__trailing-icon {
    position: absolute;
    top: 0;
    right: 0;
    height: 48px;
    width: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.textfield__trailing-icon .icon {
    width: 24px;
    height: 24px;
    fill: #212121;
}

.textfield__message {
    font-size: 12px;
    font-style: italic;
    line-height: 1.6;
    color: #212121;
    margin: 0;
}
Contents
Live Demo Usage Anatomy Behavior
Basic Implementation Outlined Trailing Icon All CSS