Problem/Motivation

In Radix, the CSS rules for required field indicators are currently defined in components/form-element/form-element.scss:

.form-item label.form-required::after {
  margin-inline: 0.15em;
  content: "*";
  color: var(--bs-form-invalid-color);
}

However, with Single Directory Components (SDC) system, when rendering the form-element--label component (e.g., via #component => 'form-element--label' or SDC Twig usage), this CSS is not auto-attached, because SDC only auto-includes the CSS that is placed in the same directory and matches the component name (e.g., components/form-element--label/form-element--label.css).

This results in required labels not being styled correctly when using SDC, unless the CSS is manually duplicated or included, which defeats the purpose of SDC’s per-component encapsulation.

Additionally, when a Radix subtheme uses the form-element--label component, the styles defined in the parent (Radix) theme are not automatically included with the component. SDC's auto-library system only attaches CSS that exists within the active theme's component directory. As a result, when a subtheme uses the form-element--label component without redefining or copying the CSS, the required field styling is missing on the front end. This issue further underscores the need for component styles to be colocated with their corresponding SDC components to ensure consistent behavior across subthemes.

Steps to reproduce

  1. Use a Radix subtheme with Drupal 11.
  2. Render the form-element--label component using SDC.
  3. Notice that the required asterisk (.form-required::after) is not styled.
  4. Move the relevant CSS rule from form-element.scss to form-element--label.scss, recompile, and clear cache.
  5. The style now applies correctly, confirming the issue.

Proposed resolution

Move the relevant CSS rule for .form-item label.form-required::after into components/form-element--label/form-element--label.scss so that it is picked up and auto-attached when using the SDC component.

Remaining tasks

Create patch with proposed resolution

User interface changes

  • Required field indicators on form labels will be correctly styled when using the form-element--label Single Directory Component (SDC), both in Radix and in any subtheme.
  • The required asterisk (*) and associated styling (such as color and spacing) will now consistently appear as intended on required form fields rendered using the SDC, even if the component is used from a subtheme.
  • There are no other visual changes or regressions expected; existing styles for other form elements remain unaffected.

API changes

None

Data model changes

None

Issue fork radix-3526640

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

sam711 created an issue. See original summary.

sam711’s picture

Assigned: sam711 » Unassigned
Status: Active » Needs review
sam711’s picture

Issue summary: View changes

doxigo made their first commit to this issue’s fork.

  • doxigo committed b2e1640f on 6.0.x authored by sam711
    Issue #3526640: Component styles in form-element.scss are not applied to...
doxigo’s picture

Status: Needs review » Fixed

I'm not a fan of adding SCSS files or hardcoded styles into the theme at all but no better solution I guess.
Thanks for the fix Sam

doxigo’s picture

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.