Input URL

The Avonni Input URL lets users enter and edit a web address in a single-line field. It captures and validates URLs, with support for length constraints, pattern matching, a required state, and customizable error messages.

Overview

The Input URL is a form field built for web addresses. Beyond the basic label and value, it gives you fine-grained control over how the field validates what users type — you can cap or floor the number of characters, require a specific pattern, mark the field as required, and write your own message for each kind of validation failure. You can also adjust how the label sits relative to the field and disable or lock the input when needed. The sections below follow the configuration panel from top to bottom, so you can read along as you build.

Configuration

To configure the Input URL, select it on the canvas. The Edit Input URL panel opens on the right with three tabs: Properties, Interactions, and Style. The sections below mirror the Properties tab.

Properties

The Properties tab contains all of the field's settings in a single group.

Label

The Label setting provides the text shown above (or beside) the field that tells users what to enter. Its placement is governed by the Variant setting.

Value

The Value setting specifies the value of the input element. Use it to pre-fill the field with a starting URL.

Field Level Help

The Field Level Help setting provides help text detailing the purpose and function of the input element. It appears as a tooltip next to the label.

Variant

The Variant setting changes the appearance of the input element by controlling how the label is positioned relative to the field. Pick the option that best fits your layout:

• Standard (default) — the label sits above the field.
• Label Hidden — the label is hidden from view but remains available to assistive technologies.
• Label Inline — the label sits on the same line as the field.
• Label Stacked — the label sits stacked above the field.

Placeholder

The Placeholder setting is text displayed when the field is empty, prompting the user for a valid entry. It disappears as soon as the user starts typing.

Autocomplete

The Autocomplete setting controls auto-filling of the field. When enabled, the browser may suggest previously entered values.

Maximum Length

The Maximum Length setting is the maximum number of characters allowed in the field.

Message When Too Long

The Message When Too Long setting is the error message displayed when the value is too long. It applies only when Maximum Length is set.

Minimum Length

The Minimum Length setting is the minimum number of characters allowed in the field.

Message When Too Short

The Message When Too Short setting is the error message displayed when the value is too short. It applies only when Minimum Length is set.

Pattern

The Pattern setting is a regular expression that the input's value must match in order for the value to pass constraint validation.

Message When Pattern Mismatch

The Message When Pattern Mismatch setting is the error message displayed when a pattern mismatch is detected. It applies only when Pattern is set.

Message When Type Mismatch

The Message When Type Mismatch setting is the error message displayed when a type mismatch is detected — that is, when the value is not a valid URL format.

Required

The Required setting marks the field as mandatory. When enabled, the input element must be filled out before the form is submitted.

Message When Value Missing

The Message When Value Missing setting is the error message displayed when the value is missing. It applies only when Required is enabled.

Disabled

The Disabled setting disables the input element so that users cannot interact with it.

Read Only

The Read Only setting makes the input element read-only so that it cannot be edited by users. This is an advanced setting.

Set Component Visibility

All components support conditional visibility — see Component Visibility.

Interactions

Interactions define what happens when users interact with the URL Input. Configure them from the Interactions tab of the Edit URL Input panel.

Change

Fires when the user changes the value in the URL input field. Use this to update a flow variable with the entered URL, trigger a validation step, or drive downstream components based on what the user typed.