Skip to main content

Compound

The compound helper allows you to build a form group using multiple separate inputs with a single common label, and render those in a screenreader-friendly way.

Defining inputs​

The inputs option accepts the same hash of options you would normally pass to a form helper, however you will need to explicitly define the type of input to create, which currently can be text, textarea, select or select2.

You should provide sensible labels as well as unique IDs for each individual inputs so that screenreaders can announce the separate fields sensibly, use show-label': false to visually hide them from the user interface.

Example

Basic usage​

{{
  form.compound({
    'id': 'compound-1',
    'label': 'Example',
    'inputs': [
      {
        'class': 'form__control-col--1',
        'label': 'One',
        'id': 'guid-' ~ random(),
        'placeholder': 'One',
        'show-label': false,
        'type': 'text'
      },
      {
        'class': 'form__control-col--1',
        'label': 'Two',
        'id': 'guid-' ~ random(),
        'placeholder': 'Two',
        'show-label': false,
        'type': 'text'
      }
    ]
  })
}}

Example patterns​

Date of birth​

Date of birth
For example: 25 12 1980
{{
  form.compound({
    'id': 'compound-2',
    'help': 'For example: 25 12 1980',
    'label': 'Date of birth',
    'inputs': [
      {
        'class': 'form__control-col--1',
        'label': 'Day',
        'id': 'guid-' ~ random(),
        'placeholder': 'DD',
        'show-label': false,
        'type': 'text'
      },
      {
        'class': 'form__control-col--1',
        'label': 'Month',
        'id': 'guid-' ~ random(),
        'placeholder': 'MM',
        'show-label': false,
        'type': 'text'
      },
      {
        'class': 'form__control-col--2',
        'label': 'Year',
        'id': 'guid-' ~ random(),
        'placeholder': 'YYYY',
        'show-label': false,
        'type': 'text'
      }
    ]
  })
}}

Date of birth with one invalid field​

Date for birth
Please complete your month of birthFor example: 25 12 1980
{{
  form.compound({
    'id': 'compound-3',
    'help': 'For example: 25 12 1980',
    'label': 'Date for birth',
    'error': 'Please complete your month of birth',
    'class': 'form__group--partial-state',
    'inputs': [
      {
        'class': 'form__control-col--1',
        'label': 'Day',
        'id': 'guid-' ~ random(),
        'placeholder': 'DD',
        'show-label': false,
        'type': 'text'
      },
      {
        'class': 'form__control-col--1 has-error',
        'label': 'Month',
        'id': 'guid-' ~ random(),
        'placeholder': 'MM',
        'show-label': false,
        'type': 'text'
      },
      {
        'class': 'form__control-col--2',
        'label': 'Year',
        'id': 'guid-' ~ random(),
        'placeholder': 'YYYY',
        'show-label': false,
        'type': 'text'
      }
    ]
  })
}}

Timeout​

Response timeout
How long the system should wait for a response, usually 30 seconds
{{
  form.compound({
    'id': 'compound-3',
    'help': 'For example: 25 12 1980',
    'label': 'Date for birth',
    'error': 'Please complete your month of birth',
    'class': 'form__group--partial-state',
    'inputs': [
      {
        'class': 'form__control-col--1',
        'label': 'Day',
        'id': 'guid-' ~ random(),
        'placeholder': 'DD',
        'show-label': false,
        'type': 'text'
      },
      {
        'class': 'form__control-col--1 has-error',
        'label': 'Month',
        'id': 'guid-' ~ random(),
        'placeholder': 'MM',
        'show-label': false,
        'type': 'text'
      },
      {
        'class': 'form__control-col--2',
        'label': 'Year',
        'id': 'guid-' ~ random(),
        'placeholder': 'YYYY',
        'show-label': false,
        'type': 'text'
      }
    ]
  })
}}