Password

ic.Password is a masked text input with a visibility toggle. It works like ic.InputText but defaults to hiding typed characters behind dots. A lock icon on the left signals the field’s purpose, and the eye toggle on the right lets the user reveal the password without leaving the field.

Variant and size

Variant controls the overall look of the field. primary draws a visible border, while secondary drops the border and uses a recessed background that blends into dense forms. Size scales everything proportionally: the input, lock icon, and toggle button.

Placeholder and visibility toggle

Placeholder sets the ghost text shown when the field is empty. ShowToggle controls whether the eye button appears on the right. When disabled, the user has no way to reveal the password, which is appropriate for high-security contexts or when the field is used for confirmation entry.

Validation

Setting Invalid to true highlights the field with error colors and shows the ErrorMessage below it. When the field is valid, HelperText is shown instead as a subtle hint. Only one message is visible at a time, with the error always taking priority.

Disabled and readonly

Disabled blocks all interaction and greys the field out. The visibility toggle is hidden when disabled. Readonly keeps the content selectable and copyable but prevents editing. Use readonly when you want to show a generated password that the user might need to copy.

Programmatic text control

selectAll highlights all the text in the field. clear empties the field and fires ValueChanged with an empty string.

Events

Password fires ValueChanged on every keystroke and Submitted when the user presses Enter. Both carry the current value in the payload. In MATLAB, attach listeners with addlistener and read from evt.Data.value.

Custom styling

Every component exposes a .css property that lets you inject instance-level CSS directly from MATLAB. This example gives the password field a frosted glass card look.

pw = ic.Password("Placeholder", "Secure login", "Size", "lg");

pw.css.style(".ic-password__field", ...
    "border_left", "4px solid #3b82f6", ...
    "border_color", "rgba(59,130,246,0.25)", ...
    "background_color", "rgba(255,255,255,0.7)", ...
    "box_shadow", "inset 0 1px 3px rgba(59,130,246,0.08), 0 1px 3px rgba(0,0,0,0.06)");

pw.css.style(".ic-password__input", ...
    "color", "#1e3a5f", ...
    "letter_spacing", "0.05em");

pw.css.style(".ic-password__lock", ...
    "color", "#3b82f6", ...
    "opacity", "1");