Password
This is a component for entering passwords. It features a password visibility toggle.
Property
| No | Item | Input Value | Default Value | Action Property | Type | Action Default Value | Description |
|---|---|---|---|---|---|---|---|
| 1 | ID | String | Auto-generated | id | string | Auto-generated | The [id] property cannot be set by actions. |
| 2 | Label L | String | Password | label | string | Password | Component label |
| 3 | Width | String | 222 | width | string | 222 | Component width |
| 4 | Height | String | 55 | height | string | 55 | Component height |
| 5 | X | String | x | string | X coordinate position | ||
| 6 | Y | String | y | string | Y coordinate position | ||
| 7 | Lock | Boolean | OFF | lock | boolean | false | When ON, the component stays fixed even when the screen is scrolled. When OFF, the component moves along with the screen scroll. Added in v4.1.0. |
| 8 | Variant | Selection 1. Outlined 2. Filled 3. Standard | Outlined | variant | string | outlined | Component style |
| 9 | Legacy Design | Boolean | OFF | This is only effective when the Variant is set to Standard. When ON, the component is displayed with the legacy design. When OFF, the component is displayed with the new design. Added in v4.1.0 | |||
| 10 | Color | String Color Picker | color | string | Component color | ||
| 11 | Background Color | String Color Picker | backgroundColor | string | Background color | ||
| 12 | Label Color | String Color Picker | labelColor | string | Label text color | ||
| 13 | Input Color | String Color Picker | inputColor | string | Input text color | ||
| 14 | Disabled | Boolean | OFF | disabled | boolean | false | Disabled state |
| 15 | Read Only | Boolean | OFF | readOnly | boolean | false | Read-only mode |
| 16 | Required | Boolean | OFF | required | boolean | false | Required input setting |
| 17 | Visibility | Boolean | ON | visibility | boolean | true | Display state |
| 18 | Visibility Toggle | Boolean | ON | visibilityToggle | boolean | true | Password visibility toggle button |
| 19 | Placeholder | String | placeholder | string | Placeholder text | ||
| 20 | Helper Text | String | helperText | string | Helper text | ||
| 21 | Change Event | Selection 1. None 2. Action 3. Detached Action | None | Event on value change Detached Action became selectable in v4.1.0. | |||
| 22 | Value | String | value | string | Password value | ||
| 23 | Error | error | boolean | false | Error state (no dialog property) | ||
| 24 | Detached Action | Selection 1. [Detached Action ID] | detachedAction | string | Set a detached action Added in v4.1.0. | ||
| 25 | Tab Focus | Selection 1.[Component ID] | tabFocus | string | Next focus component specification Added in v3.3.0 |
Event
| Event name | Description |
|---|---|
| onchange | Occurs when a value change is made and the cursor is moved out of the way. |