InputText

ic.InputText is a single-line text field for collecting short user input. It supports prefix and suffix labels for context (units, protocols, domains), built-in validation with error messages, a clearable button, and a character counter. It fires ValueChanged on every keystroke and Submitted when the user presses Enter.

Variant and size

Variant controls the overall look of the field. primary draws a visible border, which makes it clear where the input area is, while secondary drops the border and uses a recessed background that blends better into dense forms. Size scales everything proportionally.

Prefix and suffix

Prefix and Suffix add static labels at the edges of the field, inside the border. They are useful for showing units, protocols, or domain parts so the user knows what format to type in without needing a separate label.

Validation

Setting Invalid to true highlights the field as erroneous 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.

Clearable and character limit

Clearable adds an X button inside the field so the user can empty it in one click, which saves time when the field contains a long value. MaxLength caps the number of characters, and ShowCounter displays a live count below the field that turns red when the input approaches the limit.

From MATLAB, selectAll highlights all text for quick replacement, and clear empties the field programmatically — the same effect as the clearable X button, but triggered from code.

Disabled and readonly

Disabled blocks all interaction and greys the field out, while Readonly keeps the content selectable and copyable but prevents editing. Use readonly when you want to show a computed or locked value that the user might still need to copy.

Events

InputText 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. Here is a handwritten notebook style with a serif font. The selectors target .ic-input-text__field (the outer wrapper) and .ic-input-text__input (the actual input element).

txt = ic.InputText("Placeholder", "Write your notes...", "Size", "lg");

txt.css.style(".ic-input-text__field", ...
    "background_color", "#fefce8", ...
    "border_color", "transparent", ...
    "border_bottom_color", "#c4b5a0", ...
    "border_radius", "4px 4px 0 0", ...
    "box_shadow", "inset 0 1px 4px rgba(180,160,120,0.15)");

txt.css.style(".ic-input-text__field--focused", ...
    "border_bottom_color", "#3b82f6", ...
    "box_shadow", "inset 0 1px 4px rgba(180,160,120,0.15), 0 2px 0 -1px #3b82f6");

txt.css.style(".ic-input-text__input", ...
    "font_family", "Georgia, Palatino Linotype, serif", ...
    "color", "#3e3529");