---
name: 'Field: Combined input'
route: /components/common/forms/form-field-combined-input
menu: Forms
edit: false
---

import { Playground, Props } from 'docz'
import { State } from 'react-powerplug'
import FormFieldCombinedInput from './form-field-combined-input'

# FormFieldCombinedInput
**SUBCATEGORY:** Forms

<hr />

## Combined input field
### Description
For single input forms, such as search.

<Playground>
  <State initial={{ value: '' }}>
  {({ state, setState }) => (
    <FormFieldCombinedInput
      {...state}
      buttonLabel="Button"
      id='combined'
      labelText="Label"
      maxLength={30}
      onChange={e => setState({ value: e.target.value })}
      placeholder='Text placeholder'
    />
  )}
</State>
</Playground>

**Validation**

<Playground>
  <State initial={{ value: '' }}>
    {({ state, setState }) => (
      <FormFieldCombinedInput
        {...state}
        buttonLabel="Button"
        id='validation'
        error="Notice"
        labelText="Label"
        maxLength={30}
        onChange={e => setState({ value: e.target.value })}
        placeholder='Text placeholder'
      />
    )}
  </State>
</Playground>

<hr />

## Combined input field (adjacent)
### Description
For single input forms, such as search.

**Avoid including `error`, `labelTag` and `helperText` props when using adjacent layout. Instead, use the standard layout.**

<Playground>
  <State initial={{ value: '' }}>
  {({ state, setState }) => (
    <FormFieldCombinedInput
      {...state}
      adjacent
      buttonLabel="Button"
      id='combined-adjacent'
      labelText="Label"
      maxLength={30}
      onChange={e => setState({ value: e.target.value })}
      placeholder='Text placeholder'
    />
  )}
</State>
</Playground>

<hr />

## Combined input field (inverse)
### Description
For single input forms, such as search.

<Playground style={{backgroundColor: "#333", margin: '-2em', padding: '2em'}}>
  <State initial={{ value: '' }}>
  {({ state, setState }) => (
    <FormFieldCombinedInput
      {...state}
      id='combined-inverse'
      buttonLabel="Button"
      inverse
      labelText="Label"
      maxLength={30}
      onChange={e => setState({ value: e.target.value })}
      placeholder='Text placeholder'
    />
  )}
</State>
</Playground>

<hr />

## Combined input field (inverse, adjacent)
### Description
For single input forms, such as search.

**Avoid including `error`, `labelTag` and `helperText` props when using adjacent layout. Instead, use the standard layout.**

<Playground style={{backgroundColor: "#333", margin: '-2em', padding: '2em'}}>
  <State initial={{ value: '' }}>
  {({ state, setState }) => (
    <FormFieldCombinedInput
      adjacent
      {...state}
      id='combined-inverse'
      buttonLabel="Button"
      inverse
      labelText="Label"
      maxLength={30}
      onChange={e => setState({ value: e.target.value })}
      placeholder='Text placeholder'
    />
  )}
</State>
</Playground>

<hr />

## Combined input field (slim)
### Description
For single input forms. Use where inputs are nested or constrained by layout.

<Playground>
  <State initial={{ value: 'Text value' }}>
    {({ state, setState }) => (
    <FormFieldCombinedInput
      {...state}
      id='combined-slim'
      buttonLabel="Button"
      labelText="Label"
      maxLength={30}
      onChange={e => setState({ value: e.target.value })}
      slim
      placeholder='Text placeholder'
    />
    )}
  </State>
</Playground>

<hr />

## Combined input field (slim, adjacent)
### Description
For single input forms. Use where inputs are nested or constrained by layout.

<Playground>
  <State initial={{ value: 'Text value' }}>
    {({ state, setState }) => (
    <FormFieldCombinedInput
      adjacent
      {...state}
      id='combined-slim'
      buttonLabel="Button"
      labelText="Label"
      maxLength={30}
      onChange={e => setState({ value: e.target.value })}
      slim
      placeholder='Text placeholder'
    />
    )}
  </State>
</Playground>

<hr />

## Combined input field (slim, inverse)
### Description
For single input forms. Use where inputs are nested or constrained by layout.

<Playground style={{backgroundColor: "#333", margin: '-2em', padding: '2em'}}>
  <State initial={{ value: 'Text value' }}>
    {({ state, setState }) => (
    <FormFieldCombinedInput
      {...state}
      buttonLabel="Button"
      labelText="Label"
      id='combined-slim-inverse'
      inverse
      maxLength={30}
      onChange={e => setState({ value: e.target.value })}
      slim
      placeholder='Text placeholder'
    />
    )}
  </State>
</Playground>

<hr />

## Combined input field (slim, inverse, adjacent)
### Description
For single input forms. Use where inputs are nested or constrained by layout.

<Playground style={{backgroundColor: "#333", margin: '-2em', padding: '2em'}}>
  <State initial={{ value: 'Text value' }}>
    {({ state, setState }) => (
    <FormFieldCombinedInput
      adjacent
      {...state}
      buttonLabel="Button"
      labelText="Label"
      id='combined-slim-inverse'
      inverse
      maxLength={30}
      onChange={e => setState({ value: e.target.value })}
      slim
      placeholder='Text placeholder'
    />
    )}
  </State>
</Playground>

<hr />

## Properties
<Props of={FormFieldCombinedInput} />