> 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-tel.md). # Input Phone The Avonni Input Phone gives users a labeled field for entering a telephone number. Drop it onto the canvas wherever you need to collect a phone number, and use its length, pattern, and required settings to validate what users type and show clear error messages when the entry isn't valid. ## Overview The Input Phone pairs a label with a text field built for phone numbers. Beyond the basics — label, value, placeholder, and field-level help — it offers a full set of validation controls: you can cap or floor the number of characters, enforce a pattern with a regular expression, mark the field as required, and customize the error message shown for each kind of invalid entry. The sections below follow the configuration panel from top to bottom, so you can read along as you build. ## Configuration To configure the Input Phone, select it on the canvas. The **Edit Input Phone** 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 Input Phone's settings in a single group. #### Label The **Label** setting provides the text shown above (or beside) the field to tell users what to enter. How the label is positioned relative to the field is controlled by the **Variant** setting below. #### Value The **Value** setting specifies the value of the input element. Use it to pre-fill the field with a phone number, for example by binding it to a record field. #### Field Level Help The **Field Level Help** setting adds help text that details the purpose and function of the field. It appears as a tooltip next to the label so users can get guidance without cluttering the form. #### Variant The **Variant** setting changes the appearance of the input element — specifically 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 still available to assistive technologies. * **Label Inline** — the label sits on the same line as the field. * **Label Stacked** — the label is stacked on top of 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. Turn it on to let the browser suggest a previously entered phone number. #### Maximum Length The **Maximum Length** setting sets the maximum number of characters allowed in the field. Use it to keep entries within an expected length. #### Message When Too Long The **Message When Too Long** setting is the error message displayed when the value is too long. This setting applies in tandem with **Maximum Length** — it is only relevant once a maximum length is set. #### Minimum Length The **Minimum Length** setting sets the minimum number of characters allowed in the field. Use it to require a minimum-length entry. #### Message When Too Short The **Message When Too Short** setting is the error message displayed when the value is too short. This setting applies in tandem with **Minimum Length** — it is only relevant once a 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. Use it to enforce a specific phone-number format. #### Message When Pattern Mismatch The **Message When Pattern Mismatch** setting is the error message displayed when a pattern mismatch is detected. This setting applies in tandem with **Pattern** — it is only relevant once a pattern is set. #### Required The **Required** setting marks the field so it 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. This setting applies in tandem with **Required** — it is only relevant once the field is marked required. #### Disabled The **Disabled** setting disables the input element so users cannot interact with it. #### Read Only The **Read Only** setting makes the input element read-only so it cannot be edited by users. This setting is found under the panel's advanced options. #### Message When Bad Input The **Message When Bad Input** setting is the error message displayed when a bad input is detected. This setting is found under the panel's advanced options. ### 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 Phone Input. Configure them from the **Interactions** tab of the Edit Phone Input panel. ### Change Fires when a user changes the value of the phone input field. Use the **value** output to read the entered phone number and pass it to other components or flow variables. --- # 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-tel.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.