Orange-OpenSource · hannahiss · Mar 13, 2026 · Mar 13, 2026 · Mar 13, 2026 · Mar 13, 2026
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -942,8 +942,6 @@ $form-label-font-style:                 null !default;
 $form-label-font-weight:                null !default;
 $form-label-color:                      null !default;
 $form-label-disabled-color:             var(--#{$prefix}color-content-disabled) !default; // OUDS mod
-$form-label-required-margin-left:       .1875rem !default; // OUDS mod
-$form-label-required-color:             var(--#{$prefix}primary) !default; // OUDS mod
 // scss-docs-end form-label-variables
 
 // scss-docs-start form-helper-variables

diff --git a/scss/forms/_labels.scss b/scss/forms/_labels.scss
@@ -18,8 +18,19 @@
 
 .is-required::after {
   position: absolute;
-  margin-left: $form-label-required-margin-left;
-  color: $form-label-required-color;
+  //right: 0;
+  margin-left: 4px;
+  font-weight: $ouds-font-weight-system-web-strong;
+  color: $ouds-color-content-status-negative;
+  content: "*";
+}
+
+.is-required2::after {
+  position: absolute;
+  //right: 0;
+  margin-left: 4px;
+  font-weight: $ouds-font-weight-system-web-strong;
+  color: $ouds-color-content-status-negative;
   content: "*";
 }
 

diff --git a/scss/forms/_select-input.scss b/scss/forms/_select-input.scss
@@ -124,7 +124,7 @@
     position: absolute;
     top: 50%;
     z-index: 1;
-    max-width: calc(100% - var(--#{$prefix}text-input-trailing-action-padding-right) - var(--#{$prefix}text-input-padding-x) - var(--#{$prefix}text-input-trailing-action-width) - var(--#{$prefix}text-input-column-gap));
+    width: calc(100% - var(--#{$prefix}text-input-trailing-action-padding-right) - var(--#{$prefix}text-input-padding-x) - var(--#{$prefix}text-input-trailing-action-width) - var(--#{$prefix}text-input-column-gap));
     max-height: 100%;
     overflow: hidden;
     text-overflow: ellipsis;

diff --git a/scss/forms/_text-input.scss b/scss/forms/_text-input.scss
@@ -201,6 +201,19 @@
         text-overflow: ellipsis;
         white-space: nowrap;
         @include get-font-size("label-small");
+
+        // stylelint-disable-next-line selector-no-qualifying-type
+        &.is-required {
+          position: relative;
+          width: fit-content;
+          max-width: 100%;
+          padding-right: 7px;
+
+          &::after {
+            right: 0;
+            margin-left: 3px;
+          }
+        }
       }
     }
 
@@ -290,35 +303,19 @@
 
     &:has(> button),
     &:has(.loading-indeterminate, .loading-determinate) {
-      padding-right: calc(var(--#{$prefix}text-input-trailing-action-padding-right) - var(--#{$prefix}text-input-border-width-left));
-
-      > .text-input-field,
-      > .input-container,
-      > label {
-        padding-right: calc(var(--#{$prefix}text-input-trailing-action-width) + var(--#{$prefix}text-input-column-gap));
-      }
+      padding-right: calc(var(--#{$prefix}text-input-trailing-action-padding-right) - var(--#{$prefix}text-input-border-width-left) + var(--#{$prefix}text-input-trailing-action-width) + var(--#{$prefix}text-input-column-gap));
     }
 
     // Invalid text inputs
     &:has(.text-input-field:is(:user-invalid, [aria-invalid="true"])) {
       --#{$prefix}text-input-border-color: var(--#{$prefix}color-action-negative-enabled);
       --#{$prefix}text-input-label-color: var(--#{$prefix}color-action-negative-enabled);
 
-      padding-right: calc(var(--#{$prefix}text-input-trailing-action-padding-right) - var(--#{$prefix}text-input-border-width-left));
-
-      .text-input-field,
-      .input-container,
-      label {
-        padding-right: calc(var(--#{$prefix}text-input-trailing-action-width) + var(--#{$prefix}text-input-column-gap));
-      }
+      padding-right: calc(var(--#{$prefix}text-input-trailing-action-padding-right) - var(--#{$prefix}text-input-border-width-left) + var(--#{$prefix}text-input-trailing-action-width) + var(--#{$prefix}text-input-column-gap));
 
       &:has(> button),
       &:has(.loading-indeterminate, .loading-determinate) {
-        .text-input-field,
-        .input-container,
-        label {
-          padding-right: calc($ouds-button-size-icon-only + var(--#{$prefix}text-input-column-gap-trailing-error) + var(--#{$prefix}text-input-trailing-action-width) + var(--#{$prefix}text-input-column-gap));
-        }
+        padding-right: calc($ouds-button-size-icon-only + var(--#{$prefix}text-input-column-gap-trailing-error) + var(--#{$prefix}text-input-trailing-action-width) + var(--#{$prefix}text-input-column-gap));
       }
 
       &::after {
@@ -477,6 +474,19 @@
         content: "";
         background-color: transparent;
       }
+
+      // stylelint-disable-next-line selector-no-qualifying-type
+      &.is-required {
+        position: relative;
+        width: fit-content;
+        max-width: 100%;
+        padding-right: 7px;
+
+        &::after {
+          right: 0;
+          margin-left: 3px;
+        }
+      }
     }
 
     .text-area-field {

diff --git a/site/src/components/shortcodes/MandatoryFieldIndication.astro b/site/src/components/shortcodes/MandatoryFieldIndication.astro
@@ -0,0 +1,27 @@
+---
+/*
+ * Outputs mandatory fields indication
+ */
+
+import {getConfig} from "@libs/config.ts";
+interface Props {
+  /**
+   * The component name that should be displayed.
+   */
+  componentName?: string
+
+}
+
+import { getVersionedDocsPath } from '@libs/path'
+
+const { componentName } = Astro.props
+
+const name = (componentName ? componentName.toLowerCase() : "")
+
+const link = (componentName ? `https://r.orange.fr/r/S-ouds-doc-${componentName.replace(" ", "-")}` : "")
+
+---
+
+<p>To indicate that a {name} is mandatory in a form, add the class <code>.is-required</code> to display a red asterisk at the end of the label.</p>
+
+<p>For general rules about when to add mandatory fields indication, please refer to the <a href={link}>{name} design guidelines</a> and to the <a href={getVersionedDocsPath('/foundation/form-validation#mandatory-fields-indication')}>form validation documentation</a>. In particular, do not forget to handle error messages.</p>
diff --git a/site/src/content/docs/components/checkbox.mdx b/site/src/content/docs/components/checkbox.mdx
@@ -291,9 +291,9 @@ You can align horizontally up to three checkboxes if their labels are short, add
 
 ### Max width
 
-By default checkboxes will span the whole width of their parent container, to limit the width of the checkbox on wider parent container, add a `.component-max-width` to the `.checkbox-item` container. More information on checkbox sizing in the [design guidelines](https://r.orange.fr/r/S-ouds-doc-checkbox-responsiveness).
+By default, checkboxes will span the whole width of their parent container, to limit the width of the checkbox on wider parent container, add a `.component-max-width` to the `.checkbox-item` container. More information on checkbox sizing in the [design guidelines](https://r.orange.fr/r/S-ouds-doc-checkbox-responsiveness).
 
-<Example code={`<fieldset class="control-items-list">
+<Example buttonLabel="checkbox max width" code={`<fieldset class="control-items-list">
     <div class="checkbox-item component-max-width">
       <div class="control-item-assets-container">
         <input class="control-item-indicator" type="checkbox" aria-describedby="checkboxMWDescription" id="checkboxWithMaxWidth" value="" />
@@ -639,3 +639,39 @@ For the standalone checkbox, we provide a completely different architecture to e
     <input class="form-check-input" type="checkbox" id="checkboxNoLabel" value="" aria-label="Standalone checkbox (Bootstrap compatible)" />
   </div>`} />
 </BootstrapCompatibility>
+
+## Mandatory field indication
+
+<MandatoryFieldIndication componentName="checkbox" />
+
+<Example buttonLabel="mandatory checkboxes indication" code={`<div class="checkbox-item-container">
+    <div class="checkbox-item">
+      <div class="control-item-assets-container">
+        <input class="control-item-indicator" type="checkbox" value="" id="checkboxUniqueMandatory" />
+      </div>
+      <div class="control-item-text-container">
+        <label class="control-item-label is-required" for="checkboxUniqueMandatory">Mandatory unique checkbox</label>
+      </div>
+    </div>
+  </div>
+  <hr class="my-xlarge">
+  <fieldset class="control-items-list">
+    <legend class="is-required">Mandatory checkboxes</legend>
+    <div class="checkbox-item">
+      <div class="control-item-assets-container">
+        <input class="control-item-indicator" type="checkbox" value="" id="mandatoryCheckbox1" required />
+      </div>
+      <div class="control-item-text-container">
+        <label class="control-item-label" for="mandatoryCheckbox1">Default checkbox</label>
+      </div>
+    </div>
+    <div class="checkbox-item">
+      <div class="control-item-assets-container">
+        <input checked class="control-item-indicator" type="checkbox" value="" id="mandatoryCheckbox2" required />
+      </div>
+      <div class="control-item-text-container">
+        <label class="control-item-label" for="mandatoryCheckbox2">Checked checkbox</label>
+      </div>
+    </div>
+  </fieldset>`} />
+
diff --git a/site/src/content/docs/components/password-input.mdx b/site/src/content/docs/components/password-input.mdx
@@ -123,7 +123,7 @@ A `placeholder` attribute is required on each `<input>` as our CSS-only floating
     <p id="inputPasswordInvalidHelper" class="helper-text">Enter a password with at least 8 characters (without the DEV- prefix).</p>
     <p id="inputPasswordInvalidError" class="error-text">Password must be at least 8 characters (without the DEV- prefix).</p>
   </div>
-  <div class="text-input">
+  <div class="text-input mb-medium">
     <div class="text-input-container text-input-container-outlined">
       <svg aria-hidden="true">
         <use xlink:href="${getVersionedDocsPath('/assets/img/ouds-web-sprite.svg#lock-closed')}"/>
@@ -141,4 +141,16 @@ A `placeholder` attribute is required on each `<input>` as our CSS-only floating
     </div>
     <p id="inputPasswordOutlinedInvalidHelper" class="helper-text">Enter a password with at least 8 characters (without the DEV- prefix).</p>
     <p id="inputPasswordOutlinedInvalidError" class="error-text">Password must be at least 8 characters (without the DEV- prefix).</p>
+  </div>
+  <div class="text-input">
+    <div class="text-input-container">
+      <label for="madatoryPassword" class="is-required">Password</label>
+      <input type="password" id="madatoryPassword" class="text-input-field" placeholder=" " required>
+      <button class="btn btn-minimal btn-icon">
+        <svg aria-hidden="true">
+          <use xlink:href="${getVersionedDocsPath('/assets/img/ouds-web-sprite.svg#accessibility-vision')}"/>
+        </svg>
+        <span class="visually-hidden">Show password</span>
+      </button>
+    </div>
   </div>`} />
diff --git a/site/src/content/docs/components/radio-button.mdx b/site/src/content/docs/components/radio-button.mdx
@@ -328,9 +328,9 @@ You can align horizontally up to three radio buttons if their labels are short,
 
 ### Max width
 
-By default radio buttons will span the whole width of their parent container, to limit the width of the radio button on wider parent container, add a `.component-max-width` to the `.radio-button-item` container. More information on radio button sizing in the [design guidelines](https://r.orange.fr/r/S-ouds-doc-radio-button-responsiveness).
+By default, radio buttons will span the whole width of their parent container, to limit the width of the radio button on wider parent container, add a `.component-max-width` to the `.radio-button-item` container. More information on radio button sizing in the [design guidelines](https://r.orange.fr/r/S-ouds-doc-radio-button-responsiveness).
 
-<Example code={`<fieldset class="control-items-list">
+<Example buttonLabel="radio button max width" code={`<fieldset class="control-items-list">
     <div class="radio-button-item component-max-width">
       <div class="control-item-assets-container">
         <input class="control-item-indicator" type="radio" aria-describedby="radioMWDescription" id="radioWithMaxWidth" value="" name="radioMaxWidth" />
@@ -573,3 +573,39 @@ For the standalone radio button, we provide a completely different architecture
     <input class="form-check-input" type="radio" value="" aria-label="Default standalone radio button (Bootstrap compatible)" />
   </div>`} />
 </BootstrapCompatibility>
+
+
+## Mandatory field indication
+
+<MandatoryFieldIndication componentName="radio button" />
+
+<Example buttonLabel="mandatory radio buttons indication" code={`<div class="radio-button-item-container">
+    <div class="radio-button-item">
+      <div class="control-item-assets-container">
+        <input class="control-item-indicator" type="radio" value="" id="radioUniqueMandatory" />
+      </div>
+      <div class="control-item-text-container">
+        <label class="control-item-label is-required" for="radioUniqueMandatory">Mandatory unique radio button</label>
+      </div>
+    </div>
+  </div>
+  <hr class="my-xlarge">
+  <fieldset class="control-items-list">
+    <legend class="is-required">Mandatory radio buttons</legend>
+    <div class="radio-button-item">
+      <div class="control-item-assets-container">
+        <input class="control-item-indicator" type="radio" value="" id="mandatoryRadio1" required />
+      </div>
+      <div class="control-item-text-container">
+        <label class="control-item-label" for="mandatoryRadio1">Default radio button</label>
+      </div>
+    </div>
+    <div class="radio-button-item">
+      <div class="control-item-assets-container">
+        <input checked class="control-item-indicator" type="radio" value="" id="mandatoryRadio2" required />
+      </div>
+      <div class="control-item-text-container">
+        <label class="control-item-label" for="mandatoryRadio2">Checked radio button</label>
+      </div>
+    </div>
+  </fieldset>`} />
diff --git a/site/src/content/docs/components/select-input.mdx b/site/src/content/docs/components/select-input.mdx
@@ -47,7 +47,7 @@ When there’s a value already defined, `<label>`s will automatically adjust to
   </div>`} />
 
 <BootstrapCompatibility>
-<Example code={`<select class="form-select" aria-label="Default select example">
+<Example buttonLabel="Bootstrap compatibility: selected select" code={`<select class="form-select" aria-label="Default select example">
     <option selected>Open this select menu</option>
     <option value="1">One</option>
     <option value="2">Two</option>
@@ -214,9 +214,9 @@ To display a helper link below selects, use a standard small link [with `.link`
 
 ### Max width
 
-By default select inputs will span the whole width of their parent container, to limit the width of the select input on wider parent container, add a `.component-max-width` to the `.select-input` container.
+By default, select inputs will span the whole width of their parent container, to limit the width of the select input on wider parent container, add a `.component-max-width` to the `.select-input` container.
 
-<Example code={`<div class="select-input component-max-width">
+<Example buttonLabel="select input max width" code={`<div class="select-input component-max-width">
     <div class="select-input-container">
       <label for="exampleSelectMaxWidth">Select example max width</label>
       <select class="select-input-field" id="exampleSelectMaxWidth" aria-describedby="selectMaxWidthHelper">
@@ -519,3 +519,63 @@ Group options with `<optgroup>`:
       </select>
     </div>
   </div>`} />
+
+## Mandatory field indication
+
+<MandatoryFieldIndication componentName="select input" />
+
+<Example buttonLabel="mandatory select input indication" code={`<div class="select-input">
+    <div class="select-input-container">
+      <label for="mandatorySelect" class="is-required">Mandatory select example</label>
+      <select class="select-input-field" id="mandatorySelect" required>
+        <option value="" disabled selected></option>
+        <option value="1">One</option>
+        <option value="2">Two</option>
+        <option value="3">Three</option>
+      </select>
+    </div>
+  </div>`} />
+
+{/* TODO temporary examples for debug to remove */}
+Examples to test some combinations
+
+<Example buttonLabel="mandatory select input indication temp" code={`<div class="select-input mb-medium">
+    <div class="select-input-container">
+      <label for="mandatorySelect2" class="is-required">Mandatory select example Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer viverra nisi turpis, vel dignissim enim imperdiet eu. Ut quis mollis erat. Pellentesque id leo pellentesque urna volutpat placerat non nec sem.</label>
+      <select class="select-input-field" id="mandatorySelect2" required>
+        <option value="" disabled selected></option>
+        <option value="1">One</option>
+        <option value="2">Two</option>
+        <option value="3">Three</option>
+      </select>
+    </div>
+  </div>
+  <div class="select-input mb-medium">
+    <div class="select-input-container">
+      <label for="mandatorySelect3" class="is-required">Mandatory select example.</label>
+      <select class="select-input-field" id="mandatorySelect3" required aria-invalid="true">
+        <option value="" disabled selected></option>
+        <option value="1">One</option>
+        <option value="2">Two</option>
+        <option value="3">Three</option>
+      </select>
+    </div>
+  </div>
+  <div class="select-input">
+    <div class="select-input-container">
+      <svg aria-hidden="true">
+        <use xlink:href="/orange/docs/1.1/assets/img/ouds-web-sprite.svg#heart-empty"/>
+      </svg>
+      <label for="exampleDisabledLoadingSelect1" class="is-required">Disabled loading select example</label>
+      <select disabled class="select-input-field loading-indeterminate" id="exampleDisabledLoadingSelect1" aria-describedby="loading-msg-5">
+        <option value="" disabled></option>
+        <option value="1" selected>One</option>
+        <option value="2">Two</option>
+        <option value="3">Three</option>
+      </select>
+      <svg viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg' class="loader" aria-hidden="true">
+        <circle class="loader-inner" cx="20" cy="20" r="17"></circle>
+      </svg>
+      <span role="status" id="loading-msg-5" class="visually-hidden d-none">Loading message</span>
+    </div>
+  </div>`} />