---
name: 'Field: Multiple inputs'
route: /components/common/forms/form-field-multiple-inputs
menu: Forms
edit: false
---

import { Playground, Props } from 'docz'
import { State, Toggle } from 'react-powerplug'
import FormFieldMultipleInputs from './form-field-multiple-inputs'

# FormFieldMultipleInputs
**SUBCATEGORY:** Forms

<hr />

## Multiple input fields
### Description
For multiple single lines of text, such as a mailing address.

<Playground>
  <State initial={{
    fields: {
      11: {
        value: '',
        ariaLabel: 'Label 1',
        id: '11',
      },
      12: {
        value: '',
        ariaLabel: 'Label 2',
        id: '12',
      }
    }
  }}>
    {({ state, setState }) => (
      <FormFieldMultipleInputs
        {...state}
        labelText='Label'
        onChange={e => setState({ fields: {...state.fields, [e.target.id]: { ...state.fields[e.target.id], value: e.target.value }}})}
      />
    )}
  </State>
</Playground>

<hr />

## Multiple input fields (different types)
### Description
For multiple, single input fields of different types, such as number, date, password, text and email.

<Playground>
  <State initial={{
    fields: {
      11: {
        value: '',
        ariaLabel: 'Label 1',
        id: '11',
        type: 'date',
      },
      12: {
        value: '',
        ariaLabel: 'Label 2',
        id: '12',
        type: 'number',
      }
    }
  }}>
    {({ state, setState }) => (
      <FormFieldMultipleInputs
        {...state}
        labelText='Label'
        onChange={e => setState({ fields: {...state.fields, [e.target.id]: { ...state.fields[e.target.id], value: e.target.value }}})}
      />
    )}
  </State>
</Playground>

<hr />

## Multiple input fields (placeholder)
### Description
For multiple single lines of text, such as a mailing address.

<Playground>
  <State initial={{
    fields: {
      31: {
        value: '',
        ariaLabel: 'Label 1',
        id: '31',
        placeholder: 'Text placeholder'
      },
      32: {
        value: '',
        ariaLabel: 'Label 2',
        id: '32',
        placeholder: 'Text placeholder'
      },
    }
  }}>
    {({ state, setState }) => (
      <FormFieldMultipleInputs
        {...state}
        labelText='Label'
        onChange={e => setState({ fields: {...state.fields, [e.target.id]: { ...state.fields[e.target.id], value: e.target.value }}})}
      />
    )}
  </State>
</Playground>

<hr />

## Multiple input fields (helper)
### Description
For multiple single lines of text, such as a mailing address.

<Playground>
  <State initial={{
    fields: {
      41: {
        value: '',
        ariaLabel: 'Label 1',
        id: '41'
      },
      42: {
        value: '',
        ariaLabel: 'Label 2',
        id: '42'
      }
    }
  }}>
    {({ state, setState }) => (
      <FormFieldMultipleInputs
        {...state}
        helperText='Helper text'
        labelText='Label'
        onChange={e => setState({ fields: {...state.fields, [e.target.id]: { ...state.fields[e.target.id], value: e.target.value }}})}
      />
    )}
  </State>
</Playground>

<hr />

## Multiple input fields (validation)
### Description
For multiple single lines of text, such as a mailing address.

<Playground>
  <State initial={{
    fields: {
      51: {
        error:'required',
        value: '',
        ariaLabel: 'Label 1',
        id: '51'
      },
      52: {
        value: '',
        ariaLabel: 'Label 2',
        id: '52'
      }
    }
  }}>
    {({ state, setState }) => (
      <FormFieldMultipleInputs
        {...state}
        labelText='Label'
        notice='Notice'
        onChange={e => setState({ fields: {...state.fields, [e.target.id]: { ...state.fields[e.target.id], value: e.target.value }}})}
      />
    )}
  </State>
</Playground>

<hr />

## Multiple input fields (disabled)
### Description
For multiple single lines of text, such as a mailing address.

<Playground>
  <State initial={{
    fields: {
      61: {
        value: 'Text value',
        ariaLabel: 'Label 1',
        id: '61',
        disabled: true
      },
      62: {
        value: 'Text value',
        ariaLabel: 'Label 2',
        id: '62',
        disabled: true
      }
    }
  }}>
    {({ state, setState }) => (
      <FormFieldMultipleInputs
        {...state}
        labelText='Label'
        onChange={e => setState({ fields: {...state.fields, [e.target.id]: { ...state.fields[e.target.id], value: e.target.value }}})}
      />
    )}
  </State>
</Playground>

<hr />

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