"required" flag not available in form-element.html.twig

Hi Thomas,

The required field is passed through the form element theme and can be accessed in twig by:
{{ element['#required'] }}. Let us know if that fixes it for you.

You're right. I can submit a patch a little later this weekend so it'll match the documentation. It would be nice to have it as a direct variable.

So I took a look, and the comments indicate that there should be a required marker available, not just required TRUE/FALSE. I believe this is outdated and was probably removed at some point, but the documentation kept saying that there would be a "required" element passed in. Personally, I think it would be nice to have the required value available (as "required" instead of "element['#required']", so I'm supplying a patch that fixes that and updates the documentation text. If this is not approved, then the alternative is to remove the required text from the form-element.html.twig files so it isn't confusing as to why "required" isn't available.

Thank you bdlangton, the patch does exactly what the documentation says and makes a lot of sense. Its the most clean solution from my point of view.

RTBC +1 but let's wait for further feedback. THANK YOU!! :)

Tested #10 on 9.1, works as expected.

RTBC + 1

We should expand the docs fix to all themes that have form-element.html.twig.

Forgot to update the hash for themes/bartik/templates/classy/form/form-element.html.twig

I can see the required flag available in template after applying the patch.
This can be moved to RTBC if no more code review is needed

Applied patch #21 and it works fine.The required variable is passed to the preprocess function of form element and documentation is added by this patch.

RTBC +1

Did someone check if #18 by @lauriii is fixed by #21? (Which means: Did someone check that all themes that have form-element.html.twig are fixed by the patch)?

Hi @Anybody,
Just check after applying #21 patch all themes that have form-element.html.twig are fixed by the patch.
Thanks.

Abhijith S, BhumikaVarshney, Thank you for looking into this issue.

Posting screenshots of your codebase or CLI does not advance the issue, since the automated testing infrastructure tells us whether the patch applies correctly.

Tagging for manual testing per #25.

This means going beyond just checking the patch applies. You will need to check each theme with a debugger or print to show that the required variable is indeed available and shows up only when the field is actually required. i.e. check both required and un-required fields to see the required variable only is available when it's a required field.

You can screenshot the debugger results but no need to screenshot the patch applying as per #27.

Manually tested the patch provided in #21 with the steps from issue summary.
- Patch applied
- Printed the required variable in template and checked the value for required and non required fields.
- required value is passed correctly.

Manual testing Pass.

Noticed patch is not updating all the theme docs.
Not updated
-- starterkit_theme

Updating issue to Needs Work.

Updated the patch from #21
Updated the doc comment in starterkit_theme theme file.

Thank you very much @joshua1234511! :)
Also for the documentation improvements!

@Kristen Pol can we remove Needs manual testing and set this RTBC? I'm a bit afraid to do this ;) :)
So textual: RTBC+1 for #32

Thanks for the updated patch and for the tentative RTBC. I updated the issue summary to use the template and improve the wording and formatting.

I'm marking RTBC based on the following. Note that it's unclear to me if a test can be added for this but, if so, move this back to "Needs work" and tag with "Needs tests".

1. Patch applies cleanly to 9.4.

2. Tests pass.

3. Code change is simple and only addresses the issue in the issue summary.

4. Manual testing passed in #31 and in #22.

5. Only change since latest manual testing is to the comments.

6. Comments have been consistently changed across all form-element.html.twig files.

[drupal-9.4.x-dev/9.4.x] [drupal-9.4.x-dev]$ grep -r "\- required:" . | grep form-element.html.twig
./core/profiles/demo_umami/themes/umami/templates/classy/form/form-element.html.twig: * - required: An indicator for whether the form element is required.
./core/modules/system/templates/form-element.html.twig: * - required: An indicator for whether the form element is required.
./core/themes/stable/templates/form/form-element.html.twig: * - required: An indicator for whether the form element is required.
./core/themes/stable9/templates/form/form-element.html.twig: * - required: An indicator for whether the form element is required.
./core/themes/bartik/templates/classy/form/form-element.html.twig: * - required: An indicator for whether the form element is required.
./core/themes/classy/templates/form/form-element.html.twig: * - required: An indicator for whether the form element is required.
./core/themes/seven/templates/classy/form/form-element.html.twig: * - required: An indicator for whether the form element is required.
./core/themes/starterkit_theme/templates/form/form-element.html.twig: * - required: An indicator for whether the form element is required.

Removing credit for screenshots that show patch attached.

Please see https://www.drupal.org/node/2888804 for more information.

Queued a test-run on 10.0.x as that's where this will go first.

I think we can add a test for this as follows:

Starting with common_test_theme add a new theme hook that extends from form_element
e.g.

'form_element__common_test' = [
  'base hook' => 'form_element',
  'render element' => 'element',
],

Then add a new template to that module form-element--common-test.html.twig and copy what's in form-element.html.twig and then add some twig that outputs the required variable, like @joshua1234511 has done in his screenshots above.

Then in \Drupal\Tests\system\Kernel\Common\FormElementsRenderTest::testDrupalRenderFormElements
Render a new form element, and pass '#theme_wrappers' => ['form_element__common_test'] with the element, e.g.

$element = [
  '#type' => 'textfield',
  '#title' => $this->randomMachineName(),
  '#value' => $this->randomMachineName(),
  '#theme_wrappers' => ['form_element__common_theme'],
  '#required' => TRUE,
];

Which should use our template, and then you can assert that the required variable is output.

Great work until this point, adding issue credits for mentoring and issue summary updates.

I'll try to work on a test for it.
Thanks @larowlan for showing how.

I did this patch following @larowlan suggestions, but I got a question regarding the new common-test-form-element.html.twig I added.

It is basically a copy of core/modules/system/templates/form-element.html.twig with a new element at the end. I was thinking: Is a shorter twig file with just the new element a best approach? (Something similar to core/modules/system/templates/datetime-wrapper.html.twig)

Sending also a test-only patch (expected to fail).

The error on D10 patch seems unrelated to the issue (It was on the BlockFormMessagesTest). I added a retest to be sure if it's random.

@andregp That's probably because the test only patch was added second. As far as I know, you need to add it first.

This issue is being reviewed by the kind folks in Slack, #needs-review-queue-initiative. We are working to keep the size of Needs Review queue [2700+ issues] to around 400 (1 month or less), following Review a patch or merge request as a guide.

@Kristen Pol you are correct. Actually surprised it didn't get moved back automatically after 2 weeks by the bot.

The patch in #39 will have to be updated for D10 as some themes have been removed.

Since we are updating all the templates think we will need a change record since from what I can tell required can be NULL. If a contrib theme is doing a certain check could this cause errors or warnings?

Re-roll for 10.1.x

Thanks! Still think this will need a change record.

Rerolled patch for Drupal 11. Here is a draft for change record requested in #48.

Draft Change Record

Title: required variable is now available in form-element.html.twig templates

Description

The documentation for form-element.html.twig has historically listed a required variable as being available to themers. However, this variable was missing from the template's preprocessing, forcing themers to access the raw element property (e.g., element['#required']) to determine if a field was required.

This issue has been fixed. The template_preprocess_form_element() function now explicitly passes a required variable to the template. This aligns the code with the documentation and provides a cleaner variable for themes to use when styling form elements.

This change affects form-element.html.twig in the System module and all core themes (including Claro and Olivero).

Impacts

• Themers: You can now use the required boolean variable directly in form-element.html.twig overrides.
• Backward Compatibility: This change is non-breaking. Existing themes accessing element['#required'] will continue to work without modification.

Code Examples

Before (Old way)

Themers had to dig into the element array to check if a field was required.

{# core/themes/mytheme/templates/form/form-element.html.twig #}

{% if element['#required'] %}
  <span class="form-required">*</span>
{% endif %}

After (New way)

Themers can now use the documented required variable directly.

{# core/themes/mytheme/templates/form/form-element.html.twig #}

{% if required %}
  <span class="form-required">*</span>
{% endif %}