American Express American Express |

Inputs

Purpose

An input field collects data from a customer. When designing an input field, it’s important to consider and outline all possible scenarios and states.

Requirements

Text Inputs, Currency Input Fields and Phone Number Input Fields require both dls.css and dls.js for validation and other functionality.

Text Inputs

Usage

Text fields let customers input text, select text, and look up data via auto-completion.

It’s important to give customers feedback when they interact with input fields so it’s clear which one they are editing.

Example - Default

Hint text
Copy
<div>
    <label id="inputExample1Label" for="inputExample1" class="label-3" tabindex="-1">Label text</label>
    <span id="hint1" class="hint" tabindex="-1">Hint text</span>
    <input id="inputExample1" type="text" name="inputExample1" class="form-control" aria-labelledby="inputExample1Label hint1">
</div>

Text Input States

Usage

Default: Indicates an empty text input.
Focus: Indicates a text input which is currently selected.
Success: Indicates customer has entered an input which is valid.
Error: Indicates customer has entered an input which is invalid.
Disabled: Indicates the text input is not available for edit.

Example - Default

Please note: Displaying a placeholder within a text input may not always apply. This is an optional feature dependent on the complexity of information we are requesting from the customer to provide clarification.

Hint text
Copy
<div data-toggle="inputfield" data-validation="^[^a-z]*$" data-validation-id="inputValidation">
    <label id="inputDefaultLabel" class="label-3" for="inputDefault">Label text</label>
    <span id="inputHint" class="hint">Hint text</span>
    <input id="inputDefault" class="form-control" placeholder="Placeholder text" aria-labelledby="inputDefaultLabel inputHint" aria-describedby="inputMessage" required />
    <div id="inputMessage">
      <div id="inputValidation" class="alert-form hidden" role="alert">
        <i class="valign-top margin-1-r" data-dls-icon="warning" data-dls-icon-variant="filled" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
        <span>All caps required.</span>
      </div>
      <div id="inputWarningAlert" class="alert-form flex hidden" role="alert">
        <i class="valign-top margin-1-r" data-dls-icon="warning" data-dls-icon-variant="filled" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
        <span>Input required</span>
      </div>
    </div>
</div>

Example - Warning

Copy
<div data-toggle="inputfield" class="has-warning">
    <label class="label-3" for="inputWarning">Label text</label>
    <input id="inputWarning" class="form-control focus" aria-describedby="inputAlert" required />
    <div id="inputAlert" class="alert-form flex" role="alert">
      <i class="valign-top margin-1-r" data-dls-icon="warning" data-dls-icon-variant="filled" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
      <span>Input required</span>
    </div>
</div>

Example - Success

Please note: A success state will not always apply to an input text.

Copy
<div data-toggle="inputfield" data-success="true">
    <label class="label-3" for="inputSuccess">Label text</label>
    <input id="inputSuccess" class="form-control" value="Input text" />
    <div class="alert-form dls-color-success flex" role="alert">
      <i class="valign-top margin-1-r" data-dls-icon="success" data-dls-icon-variant="filled" data-dls-icon-size="sm" data-dls-icon-role="decorative"><svg data-dls-icon="success" data-dls-icon-variant="filled" aria-hidden="true"><use href="#dls-success__filled"></use></svg></i>
      <span>Success message</span>
    </div>
</div>

Example - Disabled

Copy
<div>
    <label class="label-3" for="inputDisabled">Label text</label>
    <input id="inputDisabled" class="form-control" value="Input text" disabled />
</div>

Functionality

If you are using dls.js, reference the attributes below for validation and other functionality.

Attribute Name Options Description Required
data-toggle inputfield Creates an inputfield object; required for dls.js functionality. yes
data-validation regex Validates the input based on whether it matches the regex specified or not. no
data-validation-id string The id of the error message alert associated with the validation. no
data-success true Displays a success state if pass validation. no
data-password-toggle true Used for password inputs to show/hide values. no
data-show provided by developer Optional alternative for show text, defaults to English no
data-hide provided by developer Optional alternative for hide text, defaults to English no
required none Validates based on whether there is an input value or not. Displays associated error based on [role="alert"] if no input value has been entered. no

Input Field Variations

Usage

Fields may be represented in different types of forms, depending on the content.

Example - Standard Field

A field is a form element containing a label and an input.

Copy
<div>
  <label class="label-3" for="egLabelInput">Label text</label>
  <input id="egLabelInput" class="form-control" />
</div>

Example - Optional Field

If a field is optional but accompanied by mandatory fields on the same form, distinguish it by displaying “(optional)”.

Copy
<div>
  <label class="label-3" for="egReqInput1">Label text <span class="text-lowercase">(optional)</span></label>
  <input id="egReqInput1" class="form-control" />
</div>

Example - Private Input

Copy
<div>
  <label class="label-3" for="egReqInput2">Password</label>
  <input type="password" id="egReqInput2" class="form-control" value="password" autocomplete="current-password"/>
</div>

Example - Private Input With Visibility Toggle

Copy
<label class="label-3" for="egReqInput3">Password</label>
<div class="position-relative" data-toggle="inputfield" data-password-toggle="true">
  <input type="password" id="egReqInput3" class="form-control" value="frost" autocomplete="current-password"/>
  <button data-mask-button class="btn-form dls-bright-blue" aria-label="Show Password">Show</button>
</div>

Example - Grouped fields

A set of fields can appear grouped together using the grid system and responsive breakpoints.

Copy
<div class="row pad-responsive-r pad-t stack">
  <div class="col-md-4 col-sm-6">
    <div>
      <label class="label-3" for="egGrp1">First name</label>
      <input id="egGrp1" class="form-control" autocomplete="given-name"/>
    </div>
  </div>

  <div class="col-md-4 col-sm-6">
    <div>
      <label class="label-3" for="egGrp2">Middle name</label>
      <input id="egGrp2" class="form-control" autocomplete="additional-name"/>
    </div>
  </div>

  <div class="col-md-4 col-sm-6">
    <div>
      <label class="label-3" for="egGrp3">Last name</label>
      <input id="egGrp3" class="form-control" autocomplete="family-name"/>
    </div>
  </div>
</div>

Example - Text Area

A text area can be used to allow for extended user input.

Copy
<div>
  <label class="label-3" for="egTextArea">Label text</label>
  <textarea id="egTextArea" class="form-control" rows="6"></textarea>
</div>

Form Validation

Usage

There are two main types of form validation, often used together:

  1. Field level: Validation errors appear directly below the field which has an error. For example: This field is required
  2. Form level: Validation errors appear at the top of form. For example: Invalid User ID or password

Example - Success

Copy
<div class="has-success">
    <label class="label-3" for="egValidField3">Label text</label>
    <input type="text" id="egValidField3" name="egValidField3" class="form-control" value="Input text" aria-required="true" aria-invalid="true">
    <div class="alert-form dls-color-success flex" role="alert">
      <i class="valign-top margin-1-r" data-dls-icon="success" data-dls-icon-variant="filled" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
      <span>Success message</span>
    </div>
</div>

Example - Validating

Deprecated
Copy
<div class="badge badge-text dls-red-bg margin-b">Deprecated</div>

<div>
    <label class="label-3" for="inputValidationExample1">Label text</label>
    <div class="input-status">
        <input id="inputValidationExample1" type="text" class="form-control" onblur="validate()" value="Input text">
        <div aria-live="assertive" class="sr-only status"></div>
    </div>
</div>

<script>
    function validate() {
        var inputValEx1 = document.getElementById("inputValidationExample1").parentElement;
        if (inputValEx1) {
            var liveRegion = inputValEx1.querySelector(".status");
        }
        inputValEx1.classList.toggle('input-status-valid');
        if (inputValEx1.classList.contains('input-status-valid') && liveRegion) {
            liveRegion.innerText = "valid input";
        }
        else {
            liveRegion.innerText = "validating";
        }
    }

    validate();
</script>

Example - Field Level Error

Copy
<div class="has-warning">
    <label for="egValidField" class="label-3">Home address</label>
    <input type="text" id="egValidField" name="egValidField" class="form-control" value="" aria-required="true" aria-invalid="true" aria-describedby="egValidFieldAlert">
    <div id="egValidFieldAlert" class="alert-form flex" role="alert">
      <i class="valign-top margin-1-r" data-dls-icon="warning" data-dls-icon-variant="filled" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
      <span>Home address is required</span>
    </div>
</div>

Example - Form Level Error

A form level error is a type of Component Level Message.

alert: invalid UserID
alert: invalid password
Copy
<div class="card border">
    <form id="form-user-example" class="form-has-warning">
        <div class="pad-responsive alert dls-red flex flex-align-center" role="alert">
          <i class="margin-1-r" data-dls-icon="warning" data-dls-icon-variant="filled" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
          <span>Invalid User ID or password</span>
        </div>
        <hr>
        <div class="pad-responsive stack">
            <div>
                <label class="label-3" for="a-eg1-user">User ID</label>
                <input type="text" id="a-eg1-user" class="form-control form-control-warning" value="char•••••" autocomplete="username">
                <span class="sr-only">alert: invalid UserID</span>
            </div>
            <div>
                <label class="label-3" for="a-eg1-pass">Password</label>
                <input type="password" id="a-eg1-pass" class="form-control form-control-warning" autocomplete="current-password">
                <span class="sr-only">alert: invalid password</span>
            </div>
            <div class="margin-0-b">
                <label class="label-3" for="eg1-card">Cards - My Accounts</label>
                <div class="select form-control" data-toggle="select">
                    <select aria-label="navigate to" id="eg1-card">
                        <option value="1"></option>
                        <option value="2">Membership Rewards</option>
                        <option value="3">Merchant Account</option>
                        <option value="4">American Express @ Work</option>
                    </select>
                </div>
            </div>
            <div>
                <div class="checkbox">
                    <input type="checkbox" id="a-eg1-save" class="form-control" name="a-eg1-save" vale="1" />
                    <label class="label-3" for="a-eg1-save">Remember Me</label>
                </div>
            </div>
            <div>
                <button type="submit" id="a-eg1-submit" class="btn fluid margin-auto-lr" disabled>Log In</button>
            </div>
            <ul class="list-links">
                <li>
                    <a href="#" class="link-underlined">Forgot User ID or Password?</a>
                </li>
                <li>
                    <a href="#" class="link-underlined">Create New Online Account</a>
                </li>
            </ul>
        </div>
    </form>
</div>

<script>
    function createLoginExample() {
        var form = $('#form-user-example'),
            user = form.find('#a-eg1-user'),
            pass = form.find('#a-eg1-pass'),
            loginButton = form.find('#a-eg1-submit'),
            hasUser = Boolean(user.val().length),
            hasPass = Boolean(pass.val().length);

        user.on('keyup', function() {
            hasUser = Boolean($(this).val().length);
            checkState();
        });

        pass.on('keyup', function() {
            hasPass = Boolean($(this).val().length);
            checkState();
        });

        loginButton.on('click', function(e) {
            e.preventDefault();
            e.stopPropagation();

            return false;
        })

        function checkState() {
            if(hasUser && hasPass) {
                loginButton.removeAttr('disabled');
            } else {
                loginButton.attr('disabled', true);
            }
        }
    }
</script>

Currency Input Fields

Usage

Use currency input fields to enable customers to enter a currency amount. These are editable text fields that are accompanied by an uneditable, market-specific currency symbol, and, when needed, decimal and comma auto-completion.

Currency Symbol Alignment

In many European markets, such as France, Germany, and Scandinavian countries, the currency symbol sits to the right of the currency amount. In other markets, such as the U.S., the symbol sits to the left of the amount. The table below shows the placement of currency symbols in applicable markets.

dls.js handles the currency format and symbol alignments of the component. If you are not using dls.js, you should use the built-in JavaScript Number function toLocaleString or equivalent to handle formatting and alignment.

Country Locale Country Code Symbol Placement Example
IEC/IDC en-EU EUR left € 200.00
IEC/IDC en-EI USD left $200
USA en-US USD left $200
Mexico es-MX MXN left $200
Germany de-DE EUR right 200,00€
Austria de-AT EUR left €200,00
India en-IN INR left ₹200.00
Japan ja-JP JPY left ¥ 200
Sweden sv-SE SEK right 200.00kr
Hong Kong zh-HK HKD left HK$200.00
Hong Kong en-HK HKD left HK$200.00
Canada en-CA CAD left $200.00
Canada fr-CA CAD right 200,00 $
Argentina es-AR ARS left $200.00
Finland sv-FI EUR right 200,00 €
Finland fi-FI EUR right 200,00 €
Denmark da-DK DKK right 200,00 kr
Malaysia ms-MY MYR left RM200.00
Netherlands nl-NL EUR left € 200,00
Philippines en-PH PHP left Php200.00
Spain es-ES EUR right 200,00 €
Brazil pt-BR BRL left R$200,00
UK en-GB GBP left £200.00
Singapore en-SG SGD left SGD200.00
Australia en-AU AUD left $200.00
New Zealand en-NZ NZD left $200.00

Currency Input Right-Aligned

Example - Default

Copy
<form data-toggle="currencyfield">
  <label class="label-3" for="currencyDefault">Payment amount</label>
  <div class="currency-field currency-field-left">
    <span class="form-unit"></span>
    <input id="currencyDefault" type="text" class="form-control" aria-describedby="error01" required />
  </div>
  <div id="error01" class="alert-form flex hidden" role="alert">
    <i class="valign-top margin-1-r" data-dls-icon="warning" data-dls-icon-variant="filled" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
    <span>Payment amount is required</span>
  </div>
</form>

Example - Alignments

$
€
Copy
<form class="stack">
  <div data-toggle="currencyfield" data-currency="en-US">
    <label class="label-3" for="currencyAlign1">Payment amount</label>
    <div class="currency-field currency-field-left">
      <span class="form-unit">$</span>
      <input id="currencyAlign1" type="text" class="form-control" placeholder="0.00" aria-describedby="errorMsg1"
             required/>
    </div>
    <div id="errorMsg1" class="alert-form flex hidden" role="alert">
      <i class="valign-top margin-1-r" data-dls-icon="warning" data-dls-icon-variant="filled" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
      <span>Payment amount is required</span>
    </div>
  </div>
  <div data-toggle="currencyfield" data-currency="es-ES">
    <label class="label-3" for="currencyAlign2">Payment amount</label>
    <div class="currency-field currency-field-right">
      <span class="form-unit">€</span>
      <input id="currencyAlign2" type="text" class="form-control" placeholder="0.00" aria-describedby="errorMsg2"
             required/>
    </div>
    <div id="errorMsg2" class="alert-form flex hidden" role="alert">
      <i class="valign-top margin-1-r" data-dls-icon="warning" data-dls-icon-variant="filled" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
      <span>Payment amount is required</span>
    </div>
  </div>
</form>

Example - No Cents

$
Copy
<form data-toggle="currencyfield" data-currency="en-US" data-cents="false" data-float="false">
  <label class="label-3" for="currencyNoCents">Payment amount</label>
  <div class="currency-field currency-field-left">
    <span class="form-unit">$</span>
    <input id="currencyNoCents" type="text" class="form-control" placeholder="0" aria-describedby="error-2" required/>
  </div>
  <div id="error-2" class="alert-form flex hidden" role="alert">
    <i class="valign-top margin-1-r" data-dls-icon="warning" data-dls-icon-variant="filled" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
    <span>Payment amount is required</span>
  </div>
</form>

Example - Entry Formatted

₹
Copy
<form data-toggle="currencyfield" data-currency="en-IN">
  <label class="label-3" for="currencyFormatted">Payment amount</label>
  <div class="currency-field currency-field-left">
    <span class="form-unit">₹</span>
    <input id="currencyFormatted" type="text" class="form-control" placeholder="0.00" value="2500" aria-describedby="error5" required/>
  </div>
  <div id="error5" class="alert-form flex hidden" role="alert">
    <i class="valign-top margin-1-r" data-dls-icon="warning" data-dls-icon-variant="filled" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
    <span>Payment amount is required</span>
  </div>
</form>

Example - Disabled

$
Copy
<form data-toggle="currencyfield" data-currency="en-US">
  <label class="label-3" for="currencyDisabled">Payment amount</label>
  <div class="currency-field currency-field-left">
    <span class="form-unit">$</span>
    <input id="currencyDisabled" type="text" class="form-control" placeholder="0.00" value="2,500.00" disabled/>
  </div>
</form>

Example - Field-Level Error

$
Copy
<form class="has-warning" data-toggle="currencyfield" data-currency="en-US">
  <label class="label-3" for="currencyErr">Payment amount</label>
  <div class="currency-field currency-field-left">
    <span class="form-unit">$</span>
    <input id="currencyErr" type="text" class="form-control" placeholder="0.00" aria-invalid="true" aria-describedby="errorEg" required/>
  </div>
  <div id="errorEg" class="alert-form flex" role="alert">
    <i class="valign-top margin-1-r" data-dls-icon="warning" data-dls-icon-variant="filled" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
    <span>Payment amount is required</span>
  </div>
</form>

Functionality

If you are using dls.js, reference the attributes below for validation and other functionality.

Attribute Name Options Description Required
data-attribute currencyfield Creates a currencyfield object; required for functionality using dls.js. yes
data-currency locale/country code Determines the currency to display. Default is "en-US". no
data-cents true/false Displays cents. Default is true. no
data-float true/false Rounds the amount. Default is false. no
data-validation regex Validates the input based on whether it matches the regex specified or not. no
data-validation-id string The id of the error message alert associated with the validation. no
data-success true Displays a success state if pass validation. no
required nonce Validates based on whether there is an input value or not. Displays associated error based on [role="alert"] if no input value has been entered. no

Phone Number

Usage

Use a phone number input field to enable customers to type in phone numbers. The DLS provides three options for phone numbers. Formatting and masking are optional for phone number fields and must be carefully considered before applying them to the field.

Basic Phone Number

The Basic Phone Number is a simple input field with formatting and masking applied (optional). Read the section on formatting and input masking above to verify this is appropriate for your product.

Example - Basic Phone Number With Masking

Copy
<div class="row">
    <div class="col-md-6 margin-1-b">
      <label class="label-3" for="phone-input">Phone number</label>
      <div class="phone-field" data-toggle="phonefield" data-phone-format="### ### ####">
        <div class="phone">
          <input aria-label="phone number" type="tel" class="form-control" aria-describedby="phoneFieldAlert" required autocomplete="tel"/>
        </div>
      </div>
      <div id="phoneFieldAlert" class="alert dls-red pad-1-t flex hidden" role="alert">
        <i class="valign-top margin-1-r" data-dls-icon="warning" data-dls-icon-variant="filled" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
        <span class="msg">Phone number is required</span>
      </div>
    </div>
</div>

Multiple Country Phone Number with Dropdown

American Express is a global company. Using the Multiple Country Phone Number allows users greater flexibility in choosing their phone number.

The country code is displayed alongside the phone number, so users don’t need to enter it. It’s possible to allow customers to change their country code if they want to enter an international phone number. Clicking the country code displays a dropdown menu with other country codes as options.

Example - Multiple Country

Phone number
Copy
<div class="row">
    <div class="col-md-6 margin-1-b">
      <fieldset>
        <legend class="label-3">Phone number</legend>
        <div data-toggle="phonefield" class="phone-field" data-calling-code-label="phone prefix">
          <div class="countries">
            <label for="country-code" class="sr-only">Country Code</label>
            <div class="select form-control">
              <select class="focus-dark" id="country-code">
                <option value="es-AR" data-calling-code="54" data-phone-format="## #### ####">Argentina +54</option>
                <option value="en-AU" data-calling-code="61" data-phone-format="# #### ####">Australia +61</option>
                <option value="en-CA" data-calling-code="1" data-phone-format="### ### ####">Canada +1</option>
                <option value="fi-FI" data-calling-code="358" data-phone-format="### ### ###">Finland +358</option>
                <option value="en-DE" data-calling-code="49" data-phone-format="## ########">Germany +49</option>
                <option value="en-HK" data-calling-code="852" data-phone-format="#### ####">Hong Kong +852</option>
                <option value="en-IN" data-calling-code="91" data-phone-format="## #### ####">India +91</option>
                <option value="ja-JP" data-calling-code="81" data-phone-format="## #### ####">Japan +81</option>
                <option value="nl-NL" data-calling-code="31" data-phone-format="## #### ####">Netherlands +31</option>
                <option value="en-SG" data-calling-code="65" data-phone-format="#### ####">Singapore +65</option>
                <option value="es-ES" data-calling-code="34" data-phone-format="## ### ####">Spain +34</option>
                <option value="sv-SE" data-calling-code="46" data-phone-format="# ## ## ## ##">Sweden +46</option>
                <option value="en-GB" data-calling-code="44" data-phone-format="## #### ####">United Kingdom +44</option>
                <option value="en-US" data-calling-code="1" data-phone-format="### ### ####">United States +1</option>
              </select>
            </div>
          </div>
          <div class="phone">
            <label for="phone-number" class="sr-only">Phone Number</label>
            <input id="phone-number" type="tel" class="form-control" aria-describedby="countryAlert" required autocomplete="tel-national"/>
          </div>
        </div>
        <div id="countryAlert" class="alert dls-red flex hidden" role="alert">
          <i class="valign-top margin-1-r" data-dls-icon="warning" data-dls-icon-variant="filled" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
          <span class="msg">Phone number is required</span>
        </div>
      </fieldset>
    </div>
</div>

Single Country Phone Number

Though we recommend using the Multiple Country Phone Number, some products are only available in one country. If your product is country specific, use the Single Country Phone Number option.

Example - Single Country

Copy
<div class="row">
    <div class="col-md-6 margin-1-b">
      <label class="label-3" for="flag-input">Phone number</label>
      <div class="phone-field" data-toggle="phonefield" data-locale="en-US" data-country="United States" data-calling-code="1" data-calling-code-label="phone prefix" data-phone-format="###-###-####" data-show-flag data-show-calling-code>
        <div class="phone">
          <input aria-label="phone number" type="tel" class="form-control" aria-describedby="flagAlert" required autocomplete="tel-national"/>
        </div>
      </div>
      <div id="flagAlert" class="alert dls-red pad-1-t flex hidden" role="alert">
        <i class="valign-top margin-1-r" data-dls-icon="warning" data-dls-icon-variant="filled" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
        <span class="msg">Phone number is required</span>
      </div>
    </div>
</div>

EXAMPLE - FORMER PHONE NUMBER INPUT FIELD
Deprecated

Phone number
Copy
<fieldset data-toggle="smsfield" data-default-country="en-US">
    <legend class="label-3">Phone number</legend>
    <div class="row">
        <div class="col-md-6 margin-b-sm-down">
            <div class="select form-control fluid" data-toggle="select">
                <span class="select-icon"></span>
                <select aria-label="country"></select>
            </div>
        </div>
        <div class="col-md-6 sms-field">
            <input aria-label="phone number" type="tel" class="form-control" aria-describedby="phoneAlert" required />
        </div>
        <div id="phoneAlert" class="col-xs-12 alert-form flex hidden" role="alert">
          <i class="valign-top margin-1-r" data-dls-icon="warning" data-dls-icon-variant="filled" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
          <span>Phone number is required</span>
        </div>
    </div>
</fieldset>

FORMATTING & MASKING (OPTIONAL)

Phone number formats vary widely around the globe. For example, phone numbers in the US are 10 digits, including area code. However, in Hong Kong, there are no area codes and phone numbers are 8 digits. With this in mind, input masking must be implemented with care, or not used at all. As an alternative, you can use formatting.

Input masks automatically format the data provided by customers as they type. Customers only need to enter numbers, not characters like parenthesis or dashes. The field has a numbers-only constraint to prevent validation errors. Formatting takes the input data and formats it automatically to custom specifications.

To ensure input masks work correctly, they need to be localized to the customer’s region, which means that the default implementation for all customers is a standard empty form field that accepts any formatting.

Do not repurpose input masks for other regions without first researching, testing, and verifying that region’s data formatting. For markets with multiple formats, the input mask should use logic to update formatting after each key press.

Country Codes

Use the table below to determine which country codes to use for applicable markets:

Country Locale Country Code Country Calling Code
Argentina es-AR ARS 54
Australia en-AU AUD 61
Brazil pt-BR BRL 55
Canada en-CA CAD 1
Canada fr-CA CAD 1
Denmark da-DK DKK 45
Germany de-DE EUR 49
Hong Kong zh-HK HKD 852
Hong Kong en-HK HKD 852
India en-IN INR 91
Japan ja-JP JPY 81
Finland sv-FI EUR 358
Finland fi-FI EUR 358
Malaysia ms-MY MYR 60
Netherlands nl-NL EUR 31
Philippines en-PH PHP 63
Singapore en-SG SGD 65
Spain es-ES EUR 34
Sweden sv-SE SEK 46
United Kingdom en-GB GBP 44
United States en-US USD 1

Functionality

If you are using dls.js, reference the attributes below for validation and other functionality.

Basic, Multiple Country, or Single Country

Attribute Name Options Description Required
data-toggle phonefield Creates a phonefield object; required for functionality using dls.js. yes
data-phone-format string Format of the phone number, to be added to display either a basic or single country input. yes for basic & single country input
data-show-flag none If applied, will show the single country input with the flag. yes for single country input
data-show-calling-code none If applied, will show the calling code as part of the input field. yes for single country input
data-calling-code number For single country input to define what the calling code is. yes for single country input
data-calling-code-label string For single & multiple country input the accessiblity text to be displayed for the calling code. yes for single & multiple country input
data-locale locale/country code Sets a country to display for single country input. yes for single country input
data-country string For single country input the accessibility text to be displayed for the flag. yes for single country input
required none Validates based on whether there is an input value or not. Displays associated error based on [role="alert"] if no input value has been entered. no

Former Phone Number Input

Attribute Name Options Description Required
data-toggle smsfield Creates a smsfield object; required for functionality using dls.js. yes
data-default-country locale/country code Sets a default country to display, otherwise displays the first country in the list of available options. no
data-validation regex Validates the input based on whether it matches the regex specified or not. no
data-validation-id string The id of the error message alert associated with the validation. no
data-success true Displays a success state if pass validation. no
required none Validates based on whether there is an input value or not. Displays associated error based on [role="alert"] if no input value has been entered. no

Date Input

Usage

The date input field is comprised of three separate fields. The month and day dropdowns also provide type-ahead functionality, enabling the user to either select from the dropdown of available options or type in the field to quickly select their desired month or day. The year input field allows the user to type in the year in the format YYYY. The order of the fields can vary based on market and cultural variations.

Example - Date of Birth

Copy
<div data-toggle="inputgroup" class="inputgroup row">
    <label id="dob-group-label" for="dob" class="label-3 col-xs-12">Date of birth</label>
    <form id="dob" class="col-md-6" onsubmit="event.preventDefault();" onclick="event.preventDefault();" aria-describedby="dobAlert">
      <div class="row" role="group" aria-labelledby="dob-group-label">
        <div data-toggle="select" class="col-sm-12 col-lg-5 pad-responsive-b">
          <label for="month">Month</label>
          <div class="select form-control fluid">
            <select id="month" aria-describedby="monthAlert" required>
                <option>Select</option>
                <option value="1">January</option>
                <option value="2">February</option>
                <option value="3">March</option>
                <option value="4">April</option>
                <option value="5">May</option>
                <option value="6">June</option>
                <option value="7">July</option>
                <option value="8">August</option>
                <option value="9">September</option>
                <option value="10">October</option>
                <option value="11">November</option>
                <option value="12">December</option>
            </select>
          </div>
        </div>
        <div data-toggle="select" class="col-sm-12 col-lg-4 pad-responsive-b">
          <label for="day">Day</label>
          <div class="select form-control fluid">
            <select id="day" aria-describedby="dayAlert" required>
                <option>Select</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
                <option value="12">13</option>
                <option value="12">14</option>
                <option value="12">15</option>
                <option value="12">16</option>
                <option value="12">17</option>
                <option value="12">18</option>
                <option value="12">19</option>
                <option value="12">20</option>
                <option value="12">21</option>
                <option value="12">22</option>
                <option value="12">23</option>
                <option value="12">24</option>
                <option value="12">25</option>
                <option value="12">26</option>
                <option value="12">27</option>
                <option value="12">28</option>
                <option value="12">29</option>
                <option value="12">30</option>
                <option value="12">31</option>
            </select>
          </div>
        </div>
        <div data-toggle="inputfield" data-validation="^(?:19\d{2}$|20(0|1)\d{1}$)" data-validation-id="yearAlert" class="col-sm-12 col-lg-3">
          <label for="year">Year</label>
          <input id="year" class="form-control" placeholder="YYYY" aria-describedby="yearAlert" required autocomplete="bday-year">
        </div>
      </div>
    </form>
    <div class="col-xs-12">
      <div id="dobAlert" class="flex alert-form flex hidden" role="alert" data-alert-all>
        <i class="valign-top margin-1-r" data-dls-icon="warning" data-dls-icon-variant="filled" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
        Enter a date of birth.
      </div>
      <div id="labelAlert" class="flex alert-form flex hidden" role="alert" data-alert-labels>
        <i class="valign-top margin-1-r" data-dls-icon="warning" data-dls-icon-variant="filled" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
        Enter<span data-alert-label></span>&nbsp;and<span data-alert-label></span>.
      </div>
      <div data-alert-inputs>
        <div id="monthAlert" class="flex alert-form flex hidden" role="alert">
          <i class="valign-top margin-1-r" data-dls-icon="warning" data-dls-icon-variant="filled" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
          Select a month.
        </div>
        <div id="dayAlert" class="flex alert-form flex hidden" role="alert">
          <i class="valign-top margin-1-r" data-dls-icon="warning" data-dls-icon-variant="filled" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
          Select a day.
        </div>
        <div id="yearAlert" class="flex alert-form flex hidden" role="alert">
          <i class="valign-top margin-1-r" data-dls-icon="warning" data-dls-icon-variant="filled" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
          Enter a valid year.
        </div>
      </div>
  </div>
</div>

Functionality

If you are using dls.js, reference the attributes below for validation and other functionality.

Attribute Name Options Description Required
data-toggle inputgroup Creates an inputgroup object; required for dls.js functionality. yes
data-alert-all [role="alert"] Alert to show if all inputfields have warning. no
data-alert-labels span Alert to show if more than one, but less than all warnings show, replaces the span innerHTML with the associated error label. no
data-alert-inputs div Wraps the individual input alerts to show or hide based on number of total warnings. yes

Usage

A copy link input is a combo text input with button that automatically copies the text input’s value to the device’s clipboard.

Primary: The most important action on a form/page.
Secondary: The less important or alternative action on a form/page.

Usage of these styles is up to the discretion of the designer.

Example - Default

Copy
<form class="stack">
  <div data-toggle="copyfield">
      <label class="label-3" for="primaryEg">Primary</label>
      <div class="copy-field">
          <input id="primaryEg" value="https://americanexpress.com/sample-link-url" type="text" class="form-control" readonly />
          <button aria-label="Copy default primary" class="side-btn">
            <span>Copy</span>
            <i class="icon" data-dls-icon="success" data-dls-icon-variant="outline" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
            <i class="icon" data-dls-icon="warning" data-dls-icon-variant="outline" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
          </button>
      </div>
    <div id="success-default-msg1" class="alert-form flex dls-color-success hidden" role="alert" data-success>
      <i class="valign-top margin-1-r" data-dls-icon="success" data-dls-icon-variant="filled" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
      <span>Copied to clipboard</span>
    </div>
    <div id="error-default-msg1" class="alert-form flex hidden" role="alert" data-error>
      <i class="valign-top margin-1-r" data-dls-icon="warning" data-dls-icon-variant="filled" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
      <span>Link cannot be copied to clipboard</span>
    </div>
  </div>

  <div data-toggle="copyfield">
      <label class="label-3" for="secondaryEg">Secondary</label>
      <div class="copy-field copy-field-secondary">
          <input id="secondaryEg" value="https://americanexpress.com/sample-link-url" type="text" class="form-control" readonly />
          <button aria-label="Copy default secondary" class="side-btn">
              <span>Copy</span>
              <i class="icon" data-dls-icon="success" data-dls-icon-variant="outline" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
              <i class="icon" data-dls-icon="warning" data-dls-icon-variant="outline" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
          </button>
      </div>
      <div id="success-default-msg2" class="alert-form dls-color-success flex hidden" role="alert" data-success>
        <i class="valign-top margin-1-r" data-dls-icon="success" data-dls-icon-variant="filled" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
        <span>Copied to clipboard</span>
      </div>
      <div id="error-default-msg2" class="alert-form flex hidden" role="alert" data-error>
        <i class="valign-top margin-1-r" data-dls-icon="warning" data-dls-icon-variant="filled" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
        <span>Link cannot be copied to clipboard</span>
      </div>
  </div>
</form>

Example - Success

Copy
<form class="stack">
  <div data-toggle="copyfield">
      <label class="label-3" for="primarySuccessEg">Primary</label>
      <div class="copy-field success">
          <input id="primarySuccessEg" value="https://americanexpress.com/sample-link-url" type="text" class="form-control" readonly aria-describedby="success-valid-msg1" />
          <button aria-label="Copy success primary" class="side-btn">
            <span>Copy</span>
            <i class="icon" data-dls-icon="success" data-dls-icon-variant="outline" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
            <i class="icon" data-dls-icon="warning" data-dls-icon-variant="outline" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
          </button>
      </div>
      <div id="success-valid-msg1" class="alert-form flex dls-color-success" role="alert" data-success>
        <i class="valign-top margin-1-r" data-dls-icon="success" data-dls-icon-variant="filled" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
        <span>Copied to clipboard</span>
      </div>
      <div id="error-valid-msg1" class="alert-form flex hidden" role="alert" data-error>
          <i class="valign-top margin-1-r" data-dls-icon="warning" data-dls-icon-variant="filled" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
          <span>Link cannot be copied to clipboard</span>
      </div>
  </div>

  <div data-toggle="copyfield">
      <label class="label-3" for="secondarySuccessEg">Secondary</label>
      <div class="copy-field copy-field-secondary success">
          <input id="secondarySuccessEg" value="https://americanexpress.com/sample-link-url" type="text" class="form-control" readonly aria-describedby="success-valid-msg2" />
          <button aria-label="Copy success secondary" class="side-btn">
            <span>Copy</span>
            <i class="icon" data-dls-icon="success" data-dls-icon-variant="outline" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
            <i class="icon" data-dls-icon="warning" data-dls-icon-variant="outline" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
          </button>
      </div>
      <div id="success-valid-msg2" class="alert-form flex dls-color-success" role="alert" data-success>
        <i class="valign-top margin-1-r" data-dls-icon="success" data-dls-icon-variant="filled" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
        <span>Copied to clipboard</span>
      </div>
      <div id="error-valid-msg2" class="alert-form flex hidden" role="alert" data-error>
        <i class="valign-top margin-1-r" data-dls-icon="warning" data-dls-icon-variant="filled" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
        <span>Link cannot be copied to clipboard</span>
      </div>
  </div>
</form>

Example - Error

Copy
<form class="stack">
  <div data-toggle="copyfield">
      <label class="label-3" for="primaryWarningEg">Primary</label>
      <div class="copy-field warning">
          <input id="primaryWarningEg" value="https://americanexpress.com/sample-link-url" type="text" class="form-control" readonly aria-describedby="error-invalid-msg1" />
          <button aria-label="Copy error primary" class="side-btn">
            <span>Copy</span>
            <i class="icon" data-dls-icon="success" data-dls-icon-variant="outline" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
            <i class="icon" data-dls-icon="warning" data-dls-icon-variant="outline" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
          </button>
      </div>
      <div id="success-invalid-msg1" class="alert-form flex dls-color-success hidden" role="alert" data-success>
        <i class="valign-top margin-1-r" data-dls-icon="success" data-dls-icon-variant="filled" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
        <span>Copied to clipboard</span>
      </div>
      <div id="error-invalid-msg1" class="flex alert-form" role="alert" data-error>
        <i class="valign-top margin-1-r" data-dls-icon="warning" data-dls-icon-variant="filled" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
        <span>Link cannot be copied to clipboard</span>
      </div>
  </div>

  <div data-toggle="copyfield">
      <label class="label-3" for="secondaryWarningEg">Secondary</label>
      <div class="copy-field copy-field-secondary warning">
          <input id="secondaryWarningEg" value="https://americanexpress.com/sample-link-url" type="text" class="form-control" readonly aria-describedby="error-invalid-msg2" />
          <button aria-label="Copy error secondary" class="side-btn">
            <span>Copy</span>
            <i class="icon" data-dls-icon="success" data-dls-icon-variant="outline" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
            <i class="icon" data-dls-icon="warning" data-dls-icon-variant="outline" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
          </button>
      </div>
      <div id="success-invalid-msg2" class="alert-form flex dls-color-success hidden" role="alert" data-success>
        <i class="valign-top margin-1-r" data-dls-icon="success" data-dls-icon-variant="filled" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
        <span>Copied to clipboard</span>
      </div>
      <div id="error-invalid-msg2" class="flex alert-form" role="alert" data-error>
        <i class="valign-top margin-1-r" data-dls-icon="warning" data-dls-icon-variant="filled" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
        <span>Link cannot be copied to clipboard</span>
      </div>
  </div>
</form>

Functionality

If you are using dls.js, reference the attributes below for validation and other functionality.

Attribute Name Options Description Required
data-toggle copyfield Creates a copyfield object; required for functionality using dls.js. yes
data-success none Shows success message when copied. no
data-error none Shows error message when unable to copy. no

Postal Code Input Field

Deprecated

Usage

Use postal code input fields to enable customers to enter a postal code, also known as a ZIP code in the United States. These are editable text fields that use market-specific formats and character limits. When needed, the component should add a hyphen to meet downstream service formatting standards.

Example - U.S. ZIP Code

Enter a five-digit number to view a valid entry, or something else to view an error state.

Copy
<div class="stack">
  <div>
      <label for="postal1" class="label-3">City</label>
      <input id="postal1" type="text" class="form-control" value="New York" readonly disabled />
  </div>
  <div>
      <label for="postal2" class="label-3">State</label>
      <input id="postal2" type="text" class="form-control" value="New York" readonly disabled />
  </div>
  <div data-toggle="inputfield" data-validation="^(\d{5}$)" data-validation-id="egZipCodeAlert">
      <label for="egZipCodeExample" class="label-3">ZIP Code</label>
      <input type="text" id="egZipCodeExample" class="form-control" aria-describedby="egZipCodeReq" required />
      <div id="egZipCodeAlert" class="alert alert-form flex hidden" role="alert">
        <i class="valign-top margin-1-r" data-dls-icon="warning" data-dls-icon-variant="filled" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
        <span>Enter a valid ZIP code</span>
      </div>
      <div id="egZipCodeReq" class="alert alert-form flex hidden" role="alert">
        <i class="valign-top margin-1-r" data-dls-icon="warning" data-dls-icon-variant="filled" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
        <span>ZIP code is required</span>
      </div>
  </div>
</div>

Postal Code Formatting

Country/Region Format
Australia 4 numbers
Austria 4 numbers
Canada 6 alphanumeric in pattern A1A1A1
Finland 5 numbers
France 5 numbers
Germany 3 numbers
India 6 numbers
Mexico 5 numbers
Netherlands 4 numbers, space, 2 letters (e.g. 1234 AB)
Singapore 6 numbers
Spain 10 numbers
Sweden 3 numbers, space, 2 numbers (e.g. 123 45)
New Zealand 4 numbers
Taiwan 6 numbers
United States 5 or 9 numbers (e.g. 12345-6789). Customer has the option to enter hyphen into input field for nine-digit number; if nine-digit number is entered without hyphen or with a space, the component will add hyphen to meet downstream service formatting standards.
United States Armed Forces: APO/FPO/AA 1st digit: 3, 2nd digit: 4, 3rd digit: 0, 4th-9th digit: any number
United States Armed Forces: APO/FPO/AE 1st digit: 0, 2nd digit: 9, 3rd digit: 0-8, 4th-9th digit: any number
United States Armed Forces: APO/FPO/AP 1st digit: 9, 2nd digit: 6, 3rd digit: 2-6, 4th-9th digit: any number; US Corp: 5 numbers

Card Number Input

Deprecated

Usage

Using animation during the Card number, CID, and CSC inputs adds not only delight to the experience, but also helps a customer to identify where the numbers are on their Card. These input animations should be used in flows related to, but not limited to, card activation, gift card activation, and lost cards.

Example

Copy
<fieldset class="stack" data-toggle="cardfield" data-success>
    <div>
        <div class="dls-card-xl dls-card-field">
            <div class="dls-card-field-front" style="background-image:url(https://www.aexp-static.com/cdaas/one/statics/@americanexpress/static-assets/2.28.0/package/dist/img/cards/amex_generic_chip_blank_480x304.png)">
                <span class="dls-card-field-number"></span>
                <span class="dls-card-field-cid"></span>
            </div>
            <div class="dls-card-field-back" style="background-image:url(https://www.aexp-static.com/cdaas/one/statics/@americanexpress/static-assets/2.28.0/package/dist/img/cards/amex_generic_chip_back_480x304.png)">
                <span class="dls-card-field-number"></span>
                <span class="dls-card-field-csc"></span>
            </div>
        </div>
    </div>
    <div>
        <label for="exampleCardNumber">15 Digit Card Number</label>
        <input id="exampleCardNumber" data-card-number class="form-control" maxlength="15" placeholder="123456789012345" required />
    </div>
    <div>
        <label for="exampleCardCID">4 Digit Card ID (CID)</label>
        <input id="exampleCardCID" data-card-cid class="form-control" maxlength="4" placeholder="1234" />
    </div>
    <div>
        <label for="exampleCardCSC">3 Digit Card Security Code (CSC)</label>
        <input id="exampleCardCSC" data-card-csc class="form-control" maxlength="3" placeholder="123" />
    </div>
</fieldset>

Requirements

If you are using dls.js, reference the attributes below for validation and other functionality.

Attribute Name Options Description Required
data-toggle cardfield Creates a cardfield object; required for functionality using dls.js. yes
data-card-number none Adds default placeholders, functionality, and animations for card number. yes
data-card-cid none Adds default placeholders, functionality, and animations for card CID. yes
data-card-csc none Adds default placeholders, functionality, and animations for card CSC. yes
data-success none Adds form-control-success styles on completed input fields. no
required none Validates based on whether there is an input value or not. Displays associated error if no input value has been entered. no

Smart Text Input States

Deprecated

Usage

Default - Empty text input.
Focus - A text input that’s currently selected.
Success - Valid input.
Error - Invalid input.
Disabled - The text input is not available for edit.

Example - Default

Full name
Copy
<fieldset data-toggle="smartfield">
  <div class="smart-field form-control">
    <div class="smart-el-placeholder">
      <legend>Full name</legend>
    </div>
    <div class="smart-el-field">
      <label for="egSFFullName">Full name</label>
      <input class="smart-el-value" id="egSFFullName" readonly="readonly" tabindex="-1" autocomplete="name"/>
    </div>
    <div class="smart-el-inputs">
      <div class="smart-el-input">
        <label for="egSFFName">First name</label>
        <input type="text" id="egSFFName" name="firstname" aria-describedby="egFirstNameAlert" required autocomplete="given-name"/>
      </div>
      <div class="smart-el-input">
        <label for="egSFLName">Last name</label>
        <input type="text" id="egSFLName" name="lastname" aria-describedby="egLastNameAlert" required autocomplete="family-name"/>
      </div>
    </div>
  </div>
  <div>
    <div id="egFirstNameAlert" class="alert-form flex hidden" role="alert">
      <i class="valign-top margin-1-r" data-dls-icon="warning" data-dls-icon-variant="filled" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
      First name is required
    </div>
    <div id="egLastNameAlert" class="alert-form flex hidden" role="alert">
      <i class="valign-top margin-1-r" data-dls-icon="warning" data-dls-icon-variant="filled" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
      Last name is required
    </div>
  </div>
</fieldset>

Example - Success

Full name
Copy
<fieldset data-toggle="smartfield">
  <div class="smart-field form-control smart-field-success has-value">
    <div class="smart-el-placeholder">
      <legend>Full name</legend>
    </div>
    <div class="smart-el-field">
      <label for="egSuccessSFFullName">Full name</label>
      <input id="egSuccessSFFullName" class="smart-el-value" readonly="readonly" tabindex="-1" autocomplete="name"/>
    </div>
    <div class="smart-el-inputs">
      <div class="smart-el-input"><label for="egSFFNameSuccess">First name</label>
        <input type="text" id="egSFFNameSuccess" name="firstname" value="Charles" autocomplete="given-name"/>
      </div>
      <div class="smart-el-input"><label for="egSFLNameSuccess">Last name</label>
        <input type="text" id="egSFLNameSuccess" name="lastname" value="Frost" autocomplete="family-name"/>
      </div>
    </div>
  </div>
</fieldset>

Example - Error Variation 1

Full name
Copy
<fieldset data-toggle="smartfield">
  <div class="smart-field form-control smart-field-warning has-value">
    <div class="smart-el-placeholder">
      <legend>Full name</legend>
    </div>
    <div class="smart-el-field">
      <label for="egSFFullNameError">Full name</label>
      <input id="egSFFullNameError" class="smart-el-value" readonly="readonly" tabindex="-1" autocomplete="name"/>
    </div>
    <div class="smart-el-inputs">
      <div class="smart-el-input ">
        <label for="egFirstnameError">First name</label>
        <input type="text" id="egFirstnameError" name="firstname" value="Charles"
               aria-describedby="egFirstnameErrorAlert" aria-invalid="false" autocomplete="given-name"/>
      </div>
      <div class="smart-el-input has-warning">
        <label for="egLastnameError">Last name</label>
        <input type="text" id="egLastnameError" name="lastname" aria-describedby="egLastnameErrorAlert" required autocomplete="family-name"/>
      </div>
    </div>
  </div>
  <div>
    <div id="egFirstnameErrorAlert" class="alert-form flex hidden" role="alert">
      <i class="valign-top margin-1-r" data-dls-icon="warning" data-dls-icon-variant="filled" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
      Your first name is required.
    </div>
    <div id="egLastnameErrorAlert" class="alert-form flex" role="alert">
      <i class="valign-top margin-1-r" data-dls-icon="warning" data-dls-icon-variant="filled" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
      Last name is required
    </div>
  </div>
</fieldset>

Example - Error Variation 2

If a customer has entered a first name successfully, selects Last Name input without entering text, then goes back to First Name input, the Last Name input will return as an error.

Full name
Copy
<fieldset data-toggle="smartfield">
  <div class="smart-field form-control smart-field-warning has-value active">
    <div class="smart-el-placeholder">
      <legend>Full name</legend>
    </div>
    <div class="smart-el-field">
      <label for="egFocusSFFullNameErr">Full name</label>
      <input id="egFocusSFFullNameErr" class="smart-el-value" aria-describedby="smartfieldMessages" readonly="readonly" tabindex="-1" autocomplete="name"/>
    </div>
    <div class="smart-el-inputs">
      <div class="smart-el-input ">
        <label for="egFocusSFFNameErr">First name</label>
        <input type="text" id="egFocusSFFNameErr" name="firstname" value="Charles"
               aria-describedby="egFocusSFFNameErrAlert" required autocomplete="given-name"/>
      </div>
      <div class="smart-el-input has-warning">
        <label for="egFocusSFLNameErr">Last name</label>
        <input type="text" id="egFocusSFLNameErr" name="lastname" aria-describedby="egFocusSFLNameErrAlert" required autocomplete="family-name"/>
      </div>
    </div>
  </div>
  <div id="smartfieldMessages">
    <div id="egFocusSFFNameErrAlert" class="alert-form flex hidden" role="alert">
      <i class="valign-top margin-1-r" data-dls-icon="warning" data-dls-icon-variant="filled" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
      First name is required
    </div>
    <div id="egFocusSFLNameErrAlert" class="alert-form flex" role="alert">
      <i class="valign-top margin-1-r" data-dls-icon="warning" data-dls-icon-variant="filled" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
      Last name is required
    </div>
  </div>
</fieldset>

Example - Disabled Variation 2 (Default)

Full name
Copy
<fieldset data-toggle="smartfield" class="disabled" disabled>
  <div class="smart-field form-control has-value disabled">
    <div class="smart-el-placeholder">
      <legend>Full name</legend>
    </div>
    <div class="smart-el-field">
      <label for="egFNameDisabled2">Full name</label>
      <input id="egFNameDisabled2" class="smart-el-value" readonly="readonly" tabindex="-1" autocomplete="name"/>
    </div>
    <div class="smart-el-inputs">
      <div class="smart-el-input">
        <label for="egSFFNameDisabled">First name</label>
        <input type="text" id="egSFFNameDisabled" value="Text" disabled autocomplete="given-name"/>
      </div>
      <div class="smart-el-input">
        <label for="egSFLNameDisabled">Last name</label>
        <input type="text" id="egSFLNameDisabled" value="Input" disabled autocomplete="family-name"/>
      </div>
    </div>
  </div>
</fieldset>

Smart Forms

Deprecated

Usage

When we need to acquire a lot of personal information from a customer, we should use smart forms. Smart forms present a simple version of something that might appear complex.

For example, when a customer engages with one of the fields, a subtle animation occurs that not only retains the field label but also divides the field into multiple inputs, if necessary. We refer to these as infield top aligned labels.

Example - Smart Field

Full Name
Copy
<fieldset data-toggle="smartfield">
  <div class="smart-field form-control">
    <div class="smart-el-placeholder">
      <legend>Full Name</legend>
    </div>
    <div class="smart-el-field">
      <label for="egSFFullName1">Full Name</label>
      <input id="egSFFullName1" class="smart-el-value" readonly="readonly" tabindex="-1" autocomplete="name"/>
    </div>
    <div class="smart-el-inputs">
      <div class="smart-el-input">
        <label for="egSFFName2">First Name</label>
        <input type="text" id="egSFFName2" name="egSFFName2" aria-describedby="egSFFName2Alert" required autocomplete="given-name"/>
      </div>
      <div class="smart-el-input">
        <label for="egSFLName2">Last Name</label>
        <input type="text" id="egSFLName2" name="egSFLName2" aria-describedby="egSFLName2Alert" required autocomplete="family-name"/>
      </div>
    </div>
  </div>

  <div id="egSFFName2Alert" class="alert-form flex hidden" role="alert">
    <i class="valign-top margin-1-r" data-dls-icon="warning" data-dls-icon-variant="filled" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
    <span>First name is required</span>
  </div>
  <div id="egSFLName2Alert" class="alert-form flex hidden" role="alert">
    <i class="valign-top margin-1-r" data-dls-icon="warning" data-dls-icon-variant="filled" data-dls-icon-size="sm" data-dls-icon-role="decorative"></i>
    <span>Last name is required</span>
  </div>
</fieldset>