Text Fields

Approved — Ready for dev

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. Empty state of input value
  2. Input label — Caption
  3. Trailing icon (optional) - Quick action button
  4. Surface/container
  5. Helper text— Caption (optional) 
  6. Character counter — Caption (optional)
  7. Focus Active indicator
  8. Input value — Body 1

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 text 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 do 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 will automatically keep all but two digits to the right. As the user types, comma delimiters should automatically be added at the thousandths and millionths place. The idea with automatically adding commas is to prevent the need for the mobile user to manually switch the software keyboard from alpha set to special characters set. Note: The Alkami Platform supports multiple currencies. To switch between currencies, the user can interact with the trailing icon to trigger a bottom sheet with additional currency options. Switching currencies in this way only impacts this particular text 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) -  Quick action button

Email

When the text 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 text field is defined, the value is redacted by default. See progress indicator component for the password strength meter.

  1. Redacted value — Subtitle 1
  2. Show/hide redacted value trailing icon - Quick action button
  3. Password strength meter - Progress indicator (optional) 

Search

For the full documentation on the search field, see the search component. The search text field will have the same overall look and feel. Once the field receives focus, the placeholder is hidden and only the value is shown.

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

Telephone

When the text 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. Area code — Subtitle 1
  2. Prefix — Subtitle 1
  3. Line number — Subtitle 1
  4. 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 icon
  3. Phone number formatted following E.164 standard
  4. Trailing icon (used to clear out the value) -  Quick action button

Leading & trailing icons

Leading icons

Leading icons are used within specific variants as a way to inform the user on what type of information the system is asking for. These icons are used for the search and international phone number variants.

Trailing icons

Trailing icons should typically only be used if they are providing some action related to the value entered by the user. These icons 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 progress indicator 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 progress indicator can aid in visualizing how strong their entry is compared to the levels of validation set.

Optional Fields

When a text field needs to be optional, “ (optional) ” will be added to the end of the label. When a text field is required, it does not have anything in the label to indicate that so it is assumed that if there are no optional fields, the entire form is required.

Specs

Color

Element Property Value
Container (static) Background color ∆colorPlatfromGray50
Container (focused/selected) Background color ∆colorPlatfromGray50
Container (error) Background color ∆colorPlatfromGray50
Container (disabled) Background color ∆colorPlatfromGray50
Active indicator (focused/selected) Border color ∆colorBrandedAffordance
Active indicator (error) Border color ∆colorBrandedError
Trailing icon (static) Icon color ∆colorPlatformGray600
Trailing icon (focused/selected) Icon color ∆colorPlatformGray600
Trailing icon (error) Icon color ∆colorBrandedError
Input label (static) Text color ∆colorPlatformGray600
Input label (focused/selected) Text color ∆colorPlatformGray600
Input label (filled) Text color ∆colorPlatformGray600
Input label (error) Text color ∆colorPlatformGray600
Value (static) Text color ∆colorPlatformGray900
Value (focused/selected) Text color ∆colorPlatformGray900
Value (error) Text color ∆colorPlatformGray900
Helper text (static) Text color ∆colorPlatformGray600
Helper text (focused/selected) Text color ∆colorPlatformGray600
Helper text (error) Text color ∆colorBrandedErrorAccessible
Character count Text color ∆colorPlatformGray600
Character count (error) Text color ∆colorBrandedErrorAccessible

Elevation

No elevation considerations for this component.

Spacing

Without trailing icon

With trailing icon

Icon spacing

The trailing quick action button is vertically centered and top aligned in the container. This is important for the text area variant as it could grow to multiple lines in height, and the quick action button needs to stay constrained to the top of the container.

International phone dropdown

States

The states of the text field are static, focus, error and disabled. The hover state will have a hand cursor when moved on top of the text field.

Theming

Unique styling

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

Filled (Default & rounded) 

Outline (Squircle)

Underline (Sharp)

Shape

Element Shape category 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

Focus state

Interaction Steps Duration Easing Notes Haptics
Focus 1. Fades in ∆motionTimeFast ∆motionTimingFunctionStandard Opacity 0-100% Light on trigger (Flutter: Selection Click)

Currency with decimal

The text field automatically places a currency symbol prefix to the input value along with the decimal keeping all but two digits to the right.

Phone number automatic format

The text field will keep the numbers all together when typed but once the user exits the focus state, it will format the number correctly. Certain validation cases will determine if the user has entered a full phone number.

Password strength meter

The password strength meter will grow as the user types in a stronger password. With each new value, the progress bar will grow when meeting the correct criteria. 

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!