How to Build a Styled Text Box with a Dynamic Length Counter

Configure the Text Input Field

1. Drag a text input widget onto the canvas.

Set the border color to #DCDEE2 and the corner radius to 4 px .

Define a focus style that adds an outer shadow with the following parameters:

Shadow color: #57A3F3

Opacity: 45 %

Offset X/Y: 0 px

Blur radius: 5 px

Add a Dynamic Length Counter

1. Drag a text widget onto the canvas and rename it Length . Set its initial content to "0/20" and apply a light‑gray font color #DCDEE2 .

2. Create an On Text Change interaction for the input field with the following logic:

maxLength = 20

def on_text_change(text):
    # Truncate excess characters
    if len(text) > maxLength:
        text = text[:maxLength]
        # Update the input field value to the truncated text if the platform allows

    # Compute remaining characters and update the counter widget
    remaining = maxLength - len(text)
    length_widget.text = f"{len(text)}/{maxLength}"  # e.g., "12/20"

This interaction ensures that:

The displayed counter updates in real time as the user types.

Any characters beyond the 20‑character limit are discarded, preventing them from being shown or stored.