Advertising sustains the DA. Ads are hidden for members. Join today

Webform Cookbook

How to create an optional different billing address composite element

Last updated on
8 July 2017

Below is an example of Elements (YAML) that can be used to create an optional billing address using custom #states with a webform composite element.

main_address:
  '#type': webform_address
  '#title': 'Main Address'
  '#title_display': above
  '#address__required': true
  '#city__required': true
  '#state_province__required': true
  '#postal_code__required': true
  '#country__required': true
different_address:
  '#type': radios
  '#title': 'Is the billing address different address from the above main address?'
  '#default_value': 'No'
  '#options': yes_no
billing_address:
  '#type': webform_address
  '#title': 'Billing Address'
  '#title_display': above
  '#states':
    visible:
      ':input[name="different_address"]':
        value: 'Yes'
  # Below are completely custom properties that use #{sub-element}__{custom-property}      
  '#address__states':
    required:
      ':input[name="different_address"]':
        value: 'Yes'
  '#city__states':
    required:
      ':input[name="different_address"]':
        value: 'Yes'
  '#state_province__states':
    required:
      ':input[name="different_address"]':
        value: 'Yes'
  '#postal_code__states':
    required:
      ':input[name="different_address"]':
        value: 'Yes'
  '#country__states':
    required:
      ':input[name="different_address"]':
        value: 'Yes'

Help improve this page

Page status: No known problems

You can: