Element settings
Computed Twig
A unique element key. Can only contain lowercase letters, numbers, and underscores.
 
This is used as a descriptive label when displaying this webform element.
Computed settings
If checked the computed elements will be hidden from display when the value is an empty string.
The value will be stored in the database. As a result, it will only be recalculated when the submission is updated. This option is required when accessing the computed element through Views.
If checked, any element used within the computed value/markup will trigger any automatic update.

Learn about Twig and how it is used in Drupal.

The following variables are available:

  • {{ 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) }}
A short description of the element used as help for the user when they use the webform.
Displays a Help tooltip after the element's title.
The text displayed in Help tooltip after the element's title.Defaults to the element's title
The text displayed in Help tooltip after the element's title.
Displays a read more hide/show widget below the element's description.
The click-able label used to open and close more text.Defaults to: More
A long description of the element that provides form additional information which can opened and closed.
Determines the placement of the title.
Determines the placement of the description.
Allow element to be populated using query string parameters.
Conditional logic
StateElementTrigger/ValueOperations
if of the following is met:
Enter a number range (1:100)
When this element is hidden, this element's value will be cleared.
Wrapper CSS classes
Apply classes to the element's wrapper around both the field and its label. Select 'custom…' to enter custom classes.
Apply custom styles to the element's wrapper around both the field and its label.
Enter additional attributes to be added to the element's wrapper.
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.
Apply classes to the element's label.
Apply custom styles to the element's label.
Enter additional attributes to be added to the element's label.
The admin title will always be displayed when managing elements and viewing & downloading submissions.If an element's title is hidden, the element's admin title will be displayed when viewing a submission.
Admin notes/comments are display next to the element title in the form builder and visible in the form's YAML source
Private elements are shown only to users with results access.
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
Create submission
Select roles and users that should be able to populate this element when creating a new submission.
Roles
Select roles and users that should be able to update this element when updating an existing submission.
Roles
Select roles and users that should be able to view this element when viewing a submission.
Roles
If unchecked, the element is never displayed. The element will only be visible within the form builder and hidden from all other displays including submission details, results, and download.