Element settings
Flexbox layout Change
Randomizes the order of the sub-element when they are displayed in the webform.
Flexbox settings
Learn more about using flexbox layouts.
The flex property specifies the length of the item, relative to the rest of the flexible items inside the same container.Defaults to: 1
Conditional logic
StateElementTrigger/ValueOperations
if of the following is met:
Enter a number range (1:100)
When this container is hidden all this container's subelement values will be cleared.
Element CSS classes
Apply classes to the element. Select 'custom…' to enter custom classes.
Apply custom styles to the element.
Enter additional attributes to be added the element.
Single item
Select how a single value is displayed.
The HTML to display for a single element value. You may include HTML or Twig. You may enter data from the submission as per the "variables" below.
The text to display for a single element value. You may include Twig. You may enter data from the submission as per the "variables" below.

Learn about Twig and how it is used in Drupal.

The following variables are available:

  • {{ children }}
  • {{ item.header }}
  • {{ item.fieldset }}
  • {{ item.details }}
  • {{ item.details-closed }}
  • {{ item.container }}
  • {{ data.element_key }}
  • {{ data['element_key'] }}
  • {{ data.element_key.delta }}
  • {{ data['element_key']['delta'] }}
  • {{ data.composite_element_key.subelement_key }}
  • {{ data.composite_element_key.delta.subelement_key }}
  • {{ original_data }}
  • {{ elements }}
  • {{ elements_flattened }}
  • {{ serial }}
  • {{ sid }}
  • {{ uuid }}
  • {{ token }}
  • {{ uri }}
  • {{ created }}
  • {{ completed }}
  • {{ changed }}
  • {{ in_draft }}
  • {{ current_page }}
  • {{ remote_addr }}
  • {{ uid }}
  • {{ langcode }}
  • {{ webform_id }}
  • {{ entity_type }}
  • {{ entity_id }}
  • {{ locked }}
  • {{ sticky }}
  • {{ notes }}
  • {{ webform }}
  • {{ webform_submission }}

You can also output tokens using the webform_token() function.

{{ webform_token('[webform_submission:values:element_value]', webform_submission, [], options) }}

You can debug data using the webform_debug() function.

{{ webform_debug(data) }}
Display CSS classes
Apply classes to the element's display wrapper. Select 'custom…' to enter custom classes.
Apply custom styles to the element's display wrapper.
Enter additional attributes to be added to the element's display wrapper.
Read the Flexbox layout element's API documentation.
Properties do not have to be prepended with a hash (#) character, the hash character will be automatically added to the custom properties.These properties and callbacks are not allowed: #allowed_tags, #tree, #array_parents, #parents, #weight, #access_callback, #ajax, #after_build, #element_validate, #lazy_builder, #post_render, #pre_render, #process, #submit, #validate, #value_callback, #file_value_callbacks, #date_date_callbacks, #date_time_callbacks, and #captcha_validate