---
title: "Input Group — React"
canonical: https://sky-ui.cf.sky.com/components/input-group/react
apiPackages: [{"name":"@sky-uk/ui-core","representedVersion":"13.2.0"}]
---

# Input Group — React

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

The InputGroup is used for a single input and submit action, where the Text Input field sits directly next to a Button.

**Note:** This component can be used as a [Field](/components/field), to include the label, inline-messaging
  and validation.

```tsx
<InputGroup
  inputProps={{ placeholder: 'Text Input' }}
  buttonProps={{ text: 'Submit', $icon: chevronRightLinear}}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| inputProps | object | undefined | Props passed to the underlying input component. Supports most standard text input options |
| buttonProps | object | undefined | Props passed to the underlying button component. Supports most standard button options |
| $isLoading | boolean | false | If true the [Loading Spinner](/components/loading-spinner) component will be rendered inside the button (instead of an icon if present) |
| loadingSpinnerProps | object | undefined | Props passed to the underlying [Loading Spinner](/components/loading-spinner) component if present. Supports all LoadingSpinnerProps except `$size` |

## With Icon

The icon can be displayed next to a button provide additional context to the copy

```tsx
<InputGroup
  $width="420px"
  inputProps={{ placeholder: 'Enter your postcode' }}
  buttonProps={{ text: 'Submit', $icon: chevronRightLinear }}
/>
```

## With LoadingSpinner

If the button triggers a process that takes time, you can use the loading spinner to indicate that an action is in progress

```tsx
<InputGroup
  $width="420px"
  inputProps={{ placeholder: 'Search...'}}
  buttonProps={{ text: 'Submit', disabled: true }}
  $isLoading={true}
  loadingSpinnerProps={{ $marginLeft: 2 }}
/>
```

## Error state

The error state can be used to visually display to the consumer that something in the field is wrong.

```tsx
<InputGroup
  $width="420px"
  inputProps={{ placeholder: 'Enter your postcode', $state: 'error' }}
  buttonProps={{ text: 'Submit' }}
/>
```

## System Modifiers

The `InputGroup` component supports the props applied using the following system functions:

- [margin](/core/system/margin/)
- [width](/core/system/width/)