--- meta: title: Input Group description: A wrapper component that groups inputs and selects visually. layout: component --- Input Groups allow you to group multiple form controls together into a single visual unit. They are ideal for creating compound inputs where multiple fields are related and should be visually connected, such as address fields, URL builders, or search interfaces with action buttons. ```html:preview ``` :::tip Input Groups support `zn-input`, `zn-select`, and `zn-button` components. The component automatically styles the borders and corners to create a seamless visual connection between controls. ::: ## Examples ### Basic Input Group The simplest input group combines two or more inputs. Borders between controls are merged, and corner radii are adjusted automatically to create a unified appearance. ```html:preview ``` ### Multiple Inputs You can group three or more inputs together. Middle inputs will have no border radius, creating a continuous flow. ```html:preview ``` ### Label Use the `label` attribute to give the input group an accessible label. For labels that contain HTML, use the `label` slot instead. ```html:preview
Mailing Address ``` ### Mixed Inputs and Selects Combine inputs and selects to create powerful compound controls. This is useful for URL builders, phone number inputs with country codes, or any scenario where a predefined option needs to be paired with user input. ```html:preview http:// https://
+1 +44 +86 +91 ``` ### Input with Button Add a button to create search interfaces, newsletter signups, or any input that requires immediate action. Buttons integrate seamlessly with the grouped styling. ```html:preview Subscribe
Search ``` ### Button at the Start Place a button at the beginning of the group for actions that should precede the input. ```html:preview ``` ### Multiple Controls with Buttons Create more complex interfaces by combining multiple inputs, selects, and buttons in a single group. ```html:preview USD EUR GBP Transfer
Apply ``` ### Flexible Width Distribution Use the `span` attribute on individual controls to control their relative widths within the group. The span attribute accepts values from 1 to 12 and works similarly to CSS grid column spans. This is particularly useful when one field should be larger than others. ```html:preview

``` :::tip **Usage:** The `span` attribute only takes effect on medium screens and above. On smaller screens, all inputs will be equal width to ensure proper mobile usability. ::: ### Different Input Types Input groups work with all input types, allowing you to create diverse compound controls. ```html:preview

``` ### Form Integration Input groups work seamlessly within forms. Each control maintains its individual `name` attribute for form submission. ```html:preview

+1 +44
Submit
``` ### Focus Behavior When a control within the group receives focus, its z-index increases to ensure the focus ring displays properly over adjacent controls. ```html:preview ``` ### Styling Individual Controls You can still apply individual styling to controls within a group. However, note that border-radius is controlled by the input group and will be overridden. ```html:preview
``` :::warning **Note:** While controls within a group can have different sizes, it's recommended to use consistent sizes for better visual harmony. The component adjusts alignment automatically, but mixed sizes may not look as polished. :::