Text Field Icons for MUI
Status
Release Available | Status | Framework Name |
|---|---|---|
| 4.1 | Current | MUI |
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.
For all the supported icons, see https://mui.com/components/text-fields/#icons and https://mui.com/components/text-fields/#input-adornments.
To show an icon as a prefix or suffix to a field, add the config as mentioned below:
The prefix or suffix values should be a valid MUI icon name.
"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:
This icon is interactive.
It is at the Portal Framework level.
"fieldUi": {
"fieldType": "string",
"label": "password",
"secure": true,
"showVisibilityToggle": true,
"disableAutocomplete": true
}