Formatted Text Inputs

Interactive Demo

This demo lets you preview the formatted text input components and configuration options. Used for collecting user input that requires a specific format, such as dates, currencies, or phone numbers. It provides visual cues and structure to help users enter data correctly.

---

Component Variations

There are six formatted input variations.

1. Prefix or Suffix

Choose from either an icon or text string shown before or after content to define the format of the input. Icons include country flags. Use for countries, emails with domains for example “@aexp.com”, or “https://” for websites.

2. Currency

Format the correct currency for your locale. The react component formats currency based on page locale.

3. Date

Contributed by EAUX Team

Date input uses the format labels to give users a persistent example of expected date format. The date input collects numbers for dates format based on local.

4. Password

Allows users to show or hide input content, this could be used for passwords or other sensitive data. Password input will hide the characters as a user enters them. A user can choose to toggle on the character visibility by clicking the view icon toggle button at the end of the input field. Remember to provide detailed helper text listing any requirements related to the data format, such as types of characters allowed or date structure.

5. Phone

A composite input, containing a select and input. Used to allow users to choose their country calling code, when entering a phone number.

6. Copy Link

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

---

What’s New

1. Updated text input to follow 8x system by decreasing the height to 48px and border updated to pass color contrast
2. Updated placeholder text usage
3. New focus state applied to text input

See full release notes