Text Fields

In progress

Text fields are the primary way users provide input into the system when other input controls (radio buttons, check boxes, sliders, switches, etc.) are not robust enough, or when users need to provide information that the system does not already have.

Text Fields

Anatomy

The essential parts of any text field are the container, focus indicator, label, value, and placeholder. All other elements are optional. Text fields come in 8 variants: alpha-numeric, numeric, text area, url, currency, email, password, search, and telephone


Note: Each variant has some unique property or functionality; but each variant can optionally utilize the atoms outlined in the alpha-numeric section.

Alpha-numeric

This is the most commonly used text field, and should always be used for text fields unless there is a specific use-case for one of the other variants covered below. One thing to remember with this text field variant is that when focused on mobile devices, the full soft keyboard will be displayed to the user. 


  1. Surface/container
  2. Leading icon (optional)
  3. Placeholder — Body 1
  4. Trailing icon (optional)
  5. Character counter — Caption (optional)
  6. Focus/activated indicator
  7. Input value — Subtitle 1
  8. Input label — Caption
  9. Helper text— Caption (optional) 

Numeric

Use this variant when you want the user to input numeric values only. This helps with form validation, but it also provides mobile users with soft keyboards some affordance for what type of information they should be inputting. Mobile users will also appreciate not having to manually switch between alpha and numeric keyboards. Anatomically, everything is the same as the alpha-numeric field. You may also want to consider using the display input field component if this input experience needs to take on a high emphasis placement.

Text area

Similar to the alpha-numeric variant, the text area variant accepts both alpha and numeric values. The unique feature of the text area variant is that values wrap to a new line and does not continue flowing outside the visible bounds of the container. From a visual perspective, an empty text area variant appears exactly the same as the alpha-numeric variant — the magic occurs once the input value needs to wrap to another line.

URL

The URL variant accepts only valid website identification strings, but does not require communication protocols (https://) before the domain or subdomain. It also doesn’t require a forward slash at the end of domain names. Similar to the alpha-numeric variant, the URL variant accepts both alpha and numeric values, but provides visual feedback when the form validation is broken. 

Currency

The currency variant is similar to the numeric variant, but automatically places a currency symbol prefix to the input value (default: USD). The decimal can either automatically keep all but two digits to the right, or can be left up to the user if a decimal is needed. Comma delimiters should automatically be added at the thousandths and millionths place if present. 


Note: The Alkami Platforms supports multiple currencies. To switch between currencies, the user can interact with the trailing icon to trigger some UI (not defined yet). Switching currencies in this way only impacts this particular input field, not the entire user's experience.

  1. Currency prefix
  2. Comma delimiter
  3. Value (all nth places, not just ones)
  4. Cent amount (optionally automatically placed)
  5. Currency switcher (optional)

Email

When the input field is defined as an email input, certain validation cases will determine if the user has entered a full email address. Utilizing this specific email variant will also display the email soft keyboard for mobile users. For both Android and iOS users the email soft keyboard prominently features the @ symbol and period to allow users to enter these characters without the need to trigger the shift key to view the entire special character set. 

Password

When the password input field is defined, the value is redacted by default.

  1. Redacted value — Subtitle 1
  2. Show/hide redacted value trailing icon
  3. Password strength meter (optional)

Search

For the full documentation on the search field, see the search component. The search text field have the same overall look and feel, but the placeholder does not morph into the input field label. Once the field receives focus, the placeholder is hidden and only the value is shown.

  1. Leading icon (optional)
  2. Placeholder — Body 1
  3. Surface/container
  4. Trailing icon (clear affordance)
  5. Focus/activated indicator
  6. Input value — Subtitle 1

Telephone

When the input field is defined as a telephone number input, certain validation cases will determine if the user has entered a full phone number. Utilizing this specific variant will also display the phone number soft keyboard for mobile users — which arranges the numbers in combination with the applicable alpha touch-tone characters, and displays a shortcut to the pound and star symbols.

Domestic numbers

When inputting domestic (USA) phone numbers, the grouping and characters used to signify the area code, prefix, and line number should automatically be displayed to the user as they type. 

  1. Leading icon (optional)
  2. Area code — Subtitle 1
  3. Prefix — Subtitle 1
  4. Line number — Subtitle 1
  5. Trailing icon (used to clear out the value)

International numbers

When inputting international phone numbers, some additional UI is presented to the user so a country can be selected. Auto cleansing and formatting of international numbers follows the E.164 international standard. The selection of the country flag (from the dropdown) will determine the plan-conforming numbers and formatting shown to the user.  More details in the Dropdown Documentation.

  1. Country flag — Unicode Standard emoji flags
  2. Dropdown affordance 
  3. Phone number formatted following E.164 standard
  4. Trailing icon (used to clear out the value)

Leading & trailing icons

Leading icons

Leading icons are used within form fields as a way to inform the user on what type of information the system is asking for. Leading icons are not actionable, and should not compete visually with other interactive elements on screen. The use of a leading icon is not required and should typically only be used if it helps the user quickly determine what information can be entered into the form. 


Examples of when to use leading icons

  • User icon indicating a username should be entered
  • @ symbol icon indicating an email address should be entered
  • Phone icon indicating a telephone number should be entered
  • Calendar icon indicating a date should be entered
  • Currency icon indicating an amount of money should be entered


Trailing icons

Trailing icons should typically only be used if they are providing some action related to the value entered by the user. Visually these actionable icons should receive the affordance accessible color treatment, but can take on system status colors (error, caution, success) as a way to provide system feedback to the user.


Examples of when to use trailing icons:

  • ‘X’ icon indicating the user can clear out all characters entered with one click
  • Eye icon indicating the user can show/hide characters entered for a password
  • Arrow icon to see if the characters entered make a unique username
  • Arrow icon indicating the user can progress to the next step in a flow
  • Date icon indicating a user can click to trigger a date picker instead of manually entering a date
  • Info icon indicating a user can get more information about what is needed for that field


Trailing icons can also be used as a way to communicate system status back to the user based on an input within that field (see graphic below). For example, if a new user types in a username during the registration process, and clicks a trailing icon as a way to check if the username is available, that icon can transform into another icon to provide feedback (loader, green check for confirmed, red x for not available).


Only one trailing icon can be utilized at a time. If there’s a need to display a clear icon (when clicked clears out all the characters entered by the user previously) the icon takes priority and replaces any previously shown icon.

Validation feedback

The bottom border can be used as a way to communicate form validation status to the user. One example is when creating a password as a new user. There is a set number of criteria to determine if a new password is strong enough, and as the user types in their new password, the border can aid in visualizing how strong their entry is compared to the levels of validation set.

Specs


Color

Container
Element Property Value
Container (static) Background color ∆colorBrandedAffordance50
Container (hover) Background color colorBrandedAffordance100
Container (focused/selected) Background color colorBrandedAffordance100
Container (error) Background color ∆colorBrandedErrorLight
Container (disabled) Background color ∆colorBrandedAffordance50
Active indicator
Element Property Value
Active indicator (static) Background color ∆colorBrandedAffordance200
Active indicator (hover) Background color ∆colorBrandedAffordance200
Active indicator (focused/selected) Background color ∆colorBrandedAffordance
Active indicator (success) Background color ∆colorBrandedSuccess
Active indicator (error) Background color ∆colorBrandedError
Active indicator (caution) Active indicator (caution) ∆colorBrandedCaution
Leading icon (static) Icon color ∆colorPlatformGray500
Leading Icon
Element Property Value
Leading icon (static) Icon color ∆colorPlatformGray500
Leading icon (hover) Icon color ∆colorPlatformGray500
Leading icon (focused/selected) Icon color ∆colorPlatformGray500
Leading icon (error) Icon color ∆colorPlatformGray500
Trailing icon
Element Property Value
Trailing icon (static) Icon color ∆colorBrandedAffordanceAccessible
Trailing icon (hover) Icon color ∆colorBrandedAffordanceAccessible
Trailing icon (focused/selected) Icon color ∆colorBrandedAffordanceAccessible
Trailing icon (error) Icon color ∆colorBrandedError
Placeholder
Element Property Value
Placeholder (static) Text color ∆colorBrandedAffordanceAccessible
Placeholder (hover) Text color ∆colorBrandedAffordanceAccessible
Placeholder (focused/selected) Text color N/A (Placeholders transform into the form label on focus)
Placeholder (filled) Text color N/A (Placeholders transform into the form label on focus)
Placeholder (Error) Text color ∆colorBrandedError
Label
Element Property Value
Label (static) Text color ∆colorBrandedAffordanceAccessible
Label (hover) Text color ∆colorBrandedAffordanceAccessible
Label (focused/selected) Text color ∆colorBrandedAffordanceAccessible
Label (error) Text color ∆colorBrandedError
Value
Element Property Value
Value (static) Text color ∆colorBrandedAffordance900
Value (hover) Text color ∆colorBrandedAffordance900
Value (focused/selected) Text color ∆colorBrandedAffordance900
Value (error) Text color ∆colorBrandedAffordance900
Other
Element Property Value
Helper text (static) Text color ∆colorPlatform500
Helper text (hover) Text color ∆colorPlatform500
Helper text (focused/selected) Text color ∆colorPlatform500
Helper text (error) Text color ∆colorBrandedError
Counter Text color ∆colorPlatform500
Password strength meter (weak) Background color ∆colorBrandedError
Password strength meter (fair) Background color ∆colorBrandedCaution
Password strength meter (strong) Background color ∆colorBrandedSuccess

Shape

Placeholder (no icons)

Placeholder (with icons)

Filled internal spacing (with icons)

Filled internal spacing (without leading icon)


Icon spacing

This redline shows how icons are anchored to the top, and are not vertically aligned. This is important for the text area variant as it could grow to multiple lines in height, and the icons need to stay constrained to the top of container.

International phone dropdown

States



Theming

Unique styling

Text fields offer a unique way to brand the experience above and beyond the normal shape and color. 

Filled (default)

Outline

Underline

Color

Container
Element Property Value
Container (static) Background color ∆colorBrandedAffordance50
Container (hover) Background color colorBrandedAffordance50
Container (focused/selected) Background color colorBrandedAffordance50
Container (error) Background color ∆colorBrandedErrorLight
Container (disabled) Background color ∆colorBrandedAffordance50
Active indicator
Element Property Value
Active indicator (static) Background color ∆colorBrandedAffordance200
Active indicator (hover) Background color ∆colorBrandedAffordance200
Active indicator (focused/selected) Background color ∆colorBrandedAffordance
Active indicator (success) Background color ∆colorBrandedSuccess
Active indicator (error) Background color ∆colorBrandedError
Active indicator (caution) Background color ∆colorBrandedCaution
Trailing icon
Element Property Value
Trailing icon (static) Icon color ∆colorBrandedAffordanceAccessible
Trailing icon (hover) Icon color ∆colorBrandedAffordanceAccessible
Trailing icon (focused/selected) Icon color ∆colorBrandedAffordanceAccessible
Trailing icon (error) Icon color ∆colorBrandedError
Placeholder
Element Property Value
Placeholder (static) Text color ∆colorBrandedAffordanceAccessible
Placeholder (hover) Text color ∆colorBrandedAffordanceAccessible
Placeholder (Error) Text color ∆colorBrandedError
Label
Element Property Value
Label (static) Text color ∆colorBrandedAffordanceAccessible
Label (hover) Text color ∆colorBrandedAffordanceAccessible
Label (error) Text color ∆colorBrandedError
Value
Element Property Value
Value (static) Text color ∆colorBrandedAffordance900
Value (hover) Text color ∆colorBrandedAffordance900
Value (focused/selected) Text color ∆colorBrandedAffordance900
Value (error) Text color ∆colorBrandedAffordance900
Other
Element Property Value
Helper text (error) Text color ∆colorBrandedError
Password strength meter (weak) Background color ∆colorBrandedError
Password strength meter (fair) Background color ∆colorBrandedCaution
Password strength meter (strong) Background color ∆colorBrandedSuccess

Shape

Element Property Value
Container Large component ∆shapeBranded


Placement

Text fields always fill the width of the parent container with a max width of 440px. When the max width is reached, the alignment (centered, left, right) should match the sibling elements contained within the parent container.

Behavior


[need motion graphic showing what happens with the currency variant when the user focus input field with a preset decimal]


[need motion graphic showing what happens with the currency variant when the user focus input field without a preset decimal]


[need motion graphic showing how the system automatically formats phone numbers as the user types in each character] In the meantime, use this as an example.


[password strength meter motion graphic needed]


Clear out entry

When a “clearable” field contains content, a clear button is displayed that enables the user to clear out their entry without having to manually remove each character.

Currency entry

When entering currency amounts, formatting is taken care of for the user without the need to manually enter decimals, commas, or currency symbols. The character entry from the user flows from the right to the left — with each additional character being added to the end of the existing string.



Developer Docs

Vue Developer Docs

Component documentation coming soon!