> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/dynamic-components/components/input-url.md). # 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](/dynamic-components/core-concepts/component-visibility.md). ## Interactions [Interactions](/dynamic-components/component-builder/interactions.md) 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. --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.avonnicomponents.com/dynamic-components/components/input-url.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.