Text Field Icons for MUI

Status

General

As a Portal administrator or developer, you can add an icon as a prefix, a suffix, or an action to an input field. For example, use an icon button to hide or reveal the password or to show the currency symbol for the field.

To show an icon as a prefix or suffix to a field, add the config as mentioned below:

Code JSON

"fieldUi": {
    "fieldType": "string",
    "label": "First Name",
    "required": true,
    "format": {
      "prefix": "account_circle_outlined",
      "prefixStyle": "iconic",
      "suffix": "account_circle",
      "suffixStyle": "iconic"    }
  }

Eye icon to show and hide input in the password field

Status

Release Available	Status	Framework Name
4.1	Current	MUI

General

For the fields to let a user input passwords, you can allow users to show and hide their input value when entering their password. To show an eye icon for the password Field add "showVisibilityToggle" : true config to the field as shown below:

Note

• This icon is interactive.

• It is at the Portal Framework level.

Example 11. Code JSON

"fieldUi": {
    "fieldType": "string",
    "label": "password",
    "secure": true,
    "showVisibilityToggle": true,
    "disableAutocomplete": true
  }