---
title: "Input Group"
canonical: https://sky-ui.cf.sky.com/components/input-group
---

# Input Group

The Input Group allows for a Text Input field to sit directly next to a Button.

## Purpose

The Input Group allows for a Text Input field to sit directly next to a Button. It is used for a single input and submit action, such as a Postcode Finder or Newsletter Sign up.

For Search Bar functionality (including a clear icon) please use the [Search Bar component](https://www.figma.com/design/UeF1sdQeguvjFh1dCrmPDG/Sky-UI---Web-Concept-Components?node-id=2075-3&t=nUIV0Qqb4yma4nc9-0) in our Figma Concept Library.

## Anatomy

The Input Group can be broken down into the following elements -

  

**1. Mandatory (optional)** <br /> The asterisk indicates whether filling in this field is optional or mandatory.

**2. Label** <br /> The text label is used to describe the required input from the user.

**3. Text Input (optional)** <br /> The text field within the container shows the user’s input once it has been filled in.

**4. Submit button** <br /> Used to submit the entered value of the field.

**5. In-line Messaging (optional)** <br /> An optional text field that can be used for further information, clarifying the required input.

**6. Validation Message** <br /> An error message after the field has been validated.

## Variants & States

There are several states available to visualise the user’s progress.