User Interface

EccPassword

EccPassword shows and edits secret values - passwords, API keys, PINs. The value is masked; an eye button reveals it for three seconds.

TSX

 import { EccPassword } from "@/ecc/components/forms/EccPassword";

EccPassword uses the basic props of all field components - label, value by path, editable, mandatory, valueOut, hidden, id, visibility by group. Read Component Basics first; this page only describes what is special about the password field.

Examples

TSX

 // display: always masked as ••••••••, the eye button shows the value for 3 seconds
<EccPassword fieldLabel="API key" value="variables.supplier.apiKey" data={process} />

// input with output
<EccPassword fieldLabel="Initial password" value="account.initialPassword" data={draft}
             editable mandatory valueOut />

// input with an explicit output path
<EccPassword id="pin" fieldLabel="PIN" valueOut="output.access.pin" editable />

Behaviour

Situation

Display

read-only	`••••••••` - the eye button shows the value (or `••••••••` if it is empty) for 3 seconds, then masks it again
`editable`	password input; the eye button switches it to plain text for 3 seconds; a second click masks it at once
`editable` and `mandatory`, empty	the field is marked as invalid (red border and star)
validator error (`setError`)	the message appears next to the label

The input asks the browser not to fill in saved passwords (autocomplete="new-password").

Output

With valueOut the current value is written to the page output as text. An empty field writes null.

JSON

 { "account": { "initialPassword": "S3cure!2026" } }

Props

Prop

Type

Default

Description

`value`	`string`	-	text or dot path into `data`
`data`	`unknown`	-	object the path is resolved against
`valueInit`	`string`	`""`	fallback and initial value
`editable`	`boolean`	`false`	input instead of display
`mandatory`	`boolean`	`false`	required marker
`valueOut`	`boolean` or `string`	-	write the value to the output (see Component Basics)
`fieldLabel`	`string`	-	label above the field
`hidden`	`boolean`	`false`	hide the field, keep its value in the output
`id`	`string`	-	id for a page validator
`allowedGroups`, `jwtToken`	`string[]`, `string`	-	visibility by group
`className`, `style`		`ecc-password`	styling of the outer wrapper

Copy to clipboard (copyable, showIcon), the info popover (info) and mandatoryMessage are not supported by EccPassword.

Page

Relation

Component Basics	basic props shared by all field components
EccText	the same for values that may be shown in plain text
Page Validator	read the value with `getById(id)` and set errors

Sections

EccPassword

Examples

Behaviour

Output

Props

Related

On this page