> 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-search.md). # Input Search The Avonni Input Search is a search-style text field for entering queries. Drop it onto the canvas wherever users need to type a search term or short text value, and pair it with standard validation options — required, length limits, and pattern matching — plus an optional loading spinner while results are fetched. ## Overview The Input Search collects a single line of text and reports its value to your flow. Beyond capturing what the user types, it gives you control over how the field is labeled, how it guides the user with placeholder and help text, and how it validates the entry before the value is accepted. Because most of these settings are optional, configuration is quick — you choose a label, decide whether the field is required, and add any constraints that fit your use case. The sections below follow the configuration panel from top to bottom, so you can read along as you build. ## Configuration To configure the Input Search, select it on the canvas. The **Edit Input Search** 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 Search's settings in a single group. Several validation messages only appear once the constraint they relate to is configured. #### Label The **Label** setting defines the text shown above (or beside) the field. It tells users what the input is for. #### Value The **Value** setting specifies the current value of the input element. Use it to pre-fill the field with an initial query or bind it to data from your flow. #### Field Level Help The **Field Level Help** setting adds help text that details the purpose and function of the input element, giving users extra guidance. #### Variant The **Variant** setting changes the appearance of the input element, primarily 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 visually hidden for a cleaner look or when the field's purpose is already clear. * **Label Inline** — the label sits beside the field, useful when horizontal space is plentiful. * **Label Stacked** — the label starts atop the field and shifts up as the user interacts with it. #### Placeholder The **Placeholder** setting provides text that is displayed when the field is empty, prompting the user for a valid entry. #### Autocomplete The **Autocomplete** setting controls auto-filling of the field. Enable it to let the browser suggest previously entered values. #### Maximum Length The **Maximum Length** setting defines the maximum number of characters allowed in the field. #### Message When Too Long The **Message When Too Long** setting defines the error message displayed when the value exceeds the maximum length. This option is available once **Maximum Length** is set. #### Minimum Length The **Minimum Length** setting defines the minimum number of characters allowed in the field. #### Message When Too Short The **Message When Too Short** setting defines the error message displayed when the value is shorter than the minimum length. This option is available once **Minimum Length** is set. #### Pattern The **Pattern** setting defines a regular expression that the input's value must match in order to pass constraint validation. #### Message When Pattern Mismatch The **Message When Pattern Mismatch** setting defines the error message displayed when a pattern mismatch is detected. This option is available once **Pattern** is set. #### Required The **Required** setting marks the field as mandatory, so the input element must be filled out before the form is submitted. #### Message When Value Missing The **Message When Value Missing** setting defines the error message displayed when the value is missing. This option is available once **Required** is enabled. #### Disabled The **Disabled** setting disables the input element so users cannot interact with it. #### Is Loading The **Is Loading** setting displays a spinner to indicate that data is loading. This is an advanced option intended for the search type. #### Read Only The **Read Only** setting makes the input element read-only so it cannot be edited by users. This is an advanced option. #### Message When Bad Input The **Message When Bad Input** setting defines the error message displayed when a bad input is detected. This is an advanced option. ### 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 Search Input. Configure them from the **Interactions** tab of the Edit Search Input panel. ### Change Fires when the user changes the value in the search field. Use the **value** output to read what was typed and pass it to another component, update a flow variable, or trigger any downstream logic. ## Styling The **Style** tab gives you fine-grained control over the Input Search's appearance. Configure it from the **Style** tab of the Edit Input Search panel. {% tabs %} {% tab title="Margin" %} Controls the *outer* spacing around the component, creating space between it and other elements on the page. * **Top / Right / Bottom / Left:** Adjust the space on each side. {% endtab %} {% tab title="Padding" %} Controls the *inner* spacing between the component's border and its content. * **Top / Right / Bottom / Left:** Adjust the inner spacing on each side. {% endtab %} {% tab title="Size" %} Controls the component's dimensions. * **Width / Height:** Set fixed dimensions for the component. * **Min Width / Max Width / Min Height / Max Height:** Constrain the size within bounds. * **Overflow:** Control how content that exceeds the bounds is handled. {% endtab %} {% tab title="Border" %} Customizes the border surrounding the component. * **Color:** Set the border color. * **Size:** Adjust the border thickness. * **Style:** Choose a border style (e.g. solid, dashed, dotted). * **Radius:** Control the roundness of the corners. {% endtab %} {% tab title="Label" %} Styles the field label text. * **Text Color:** Set the label color. * **Font Size / Font Style / Font Weight:** Control the label typography. {% endtab %} {% tab title="Input" %} Styles the search input field itself. * **Background Color:** Set the input's background color. * **Text Color:** Set the entered-value color. * **Border Color / Border Radius:** Customize the input border. * **Spacing Horizontal Start / Spacing Horizontal End:** Adjust the inner horizontal spacing of the input. {% endtab %} {% endtabs %} --- # 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-search.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.