Input Group - React

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

This component can be used as a Field, to include the label, inline-messaging and validation.

<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 component will be rendered inside the button (instead of an icon if present)
loadingSpinnerProps	object	undefined	Props passed to the underlying 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

<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

<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.

<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
width