You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: components/control/password_input/dsm/changelog.md
+4Lines changed: 4 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,5 +1,9 @@
1
1
| Date | Number | Notes |
2
2
|------|--------|-------|
3
+
| May 22, 2026 | 1.3.1 | <ul><li>Version 2.6 of the design tokens is required for the development of this update.<li>For "Loading" state<ul><li>Loading state button was updated<ul><li>Absolute positioning has been removed and replaced with Auto Layout.<ul><li>The container now uses: ouds/button/space/inset/icon-only-default</ul><li>Inside the container, the Circular Progress Indicator uses: ouds/button/space/inset/progress-indicator-only-default</ul></ul></ul> |
4
+
| Apr 22, 2026 | 1.3.0 | <ul><li>The input text reference changes from a regular weight (font-weight-label-default) to a medium weight (font-weight-label-moderate).<li>Removal of the component's max-width to avoid blocking certain layouts and to provide greater flexibility of use. The max-width values remain available in the design documentation.<li>Add spacing tokens between the label and the asterisk:<ul><li>control-text-input-space-column-gap-📄_label-asterisk<li>control-text-input-space-column-gap-📄_label-small-asterisk</ul></ul> |
**If all fields are mandatory (several fields present):**
2
+
1. Display the message "All fields are mandatory." at the top.
3
+
2. Do not use an asterisk (*) at the end of each field label, nor the word "mandatory."
4
+
5
+
**If not all fields are mandatory (and there are several fields present):**
6
+
1. Display the message "All fields marked with an * are mandatory." at the top.
7
+
2. Use an asterisk (*) at the end of each mandatory field label.
8
+
**⚠️ Important:**
9
+
* In Figma, the asterisk must be entered manually by designers in the label text.
10
+
UI rendering of the asterisk: **font-weight-bold + color-content-negative (red)**.
11
+
* Technically, for web/iOS/Android, the asterisk is positioned in a dedicated container after the label text.
12
+
Spacing between label and asterisk:
13
+
Empty state → 4px
14
+
Other states (reduced label) → 3px
15
+
If the label is truncated due to a large amount of text, the asterisk must remain visible at the end of the field.
16
+
3. Either the technology allows a 'required' attribute to be managed on the fields (usually in Web), in which case any asterisks must be hidden from users using assistive technologies,
17
+
Or the technology does not allow the mandatory nature of the field to be indicated. In this case, the asterisk must be vocalised as well as a 'mandatory' mention.
18
+
Please refer to the technical documentations for more information.
19
+
4. Depending on the use case, an 'optional' label can be added to non-mandatory fields.
20
+
21
+
If there is only one field in the form, or if the mandatory nature is obvious (such as login/password), no mention is necessary since the fields are essential to the form's functionality.
In its "Empty" state (without a placeholder), the label of this component allows two lines of text editing. However, it is recommended not to exceed one line of text.
3
+
Apart from the case described above, this component doesn't allow multi-line text editing (whether for the label, placeholder or input).
4
+
As a result, and in order to maintain a consistent and uniform height across multiple components, the presence of an excessive amount of text (in the label, placeholder, or input) will cause the text to be truncated so that only a single line remains visible for each element.
5
+
Additionally, allowing multi-line text editing would create confusion with the "Text area" component.
6
+
7
+
**Max-width vs full-width**
8
+
For greater flexibility, this component doesn't have a default max-width. To avoid exceeding a width that would degrade readability and the perception of a compact interactive element, we recommend applying **a max-width of around 480px.**
9
+
For mobile or tablet use (or if the component is positioned inside a specific container), it is possible to set this component to use the full available width (of the screen or the container).
10
+
Please note that this behavior is not the default rule; it may be preferred if the template allows it (to improve user comfort or for better page structure/hierarchy).
11
+
12
+
**User zoom in/out**
13
+
The behavior of the text during user zoom in/out must follow a fundamental principle: the text must remain readable, accessible, and must never break the structure or lose information.
14
+
However, "Text input" components present an exception regarding the loss of textual information following the activation of user zoom, since text truncation (label, placeholder, input text) is exceptionally allowed and enabled.
15
+
* The text must always scale proportionally with user zoom. Text resizing must never be blocked.
16
+
* The component's height and width must be flexible, never fixed, in order to automatically adapt its dimensions according to the level of zoom.
17
+
* In order to preserve the minimun interactive area during user zoom out, this component have a min-width **of 240px** and a min-height **of 60px**.
18
+
* Even if, the component has a max-height or a max-width for resizing control purposes, technically, during user zoom in, these limitations are not fixed but must be scalable in order to adapt to the user's zoom level.
19
+
* In its "Leading icon" variant, user zoom in/out doesn't affect the size of the icons; they remain fixed in size (decorative use).
20
+
* As the error icon is functional, it must follow the same rules as text.
21
+
* The behaviors of the button (layout: icon only) component during user zoom are available in the corresponding documentation. [Learn more about the behavior of the button component.](https://www.figma.com/design/QtOWrH1m3RHOAkfyy0XFil?node-id=92394-14049)
* Strong text can be used sparingly to highlight key information within the content. Text is allowed using the corresponding "Strong" token (e.g. Label/Medium/Strong and Label/Large/Strong) depending on the selected text style.
3
+
* No other text styles or custom font weights should be used.
4
+
5
+
***⚠️ Underline text**
6
+
* Underlined text must not be applied manually (e.g. in helper text), as it is commonly associated with hyperlinks and may mislead users.
Even though in Figma this rendering option is available and editable from the properties of each input component, the configuration of this rendering option is actually transversal across the entire product/service in which the component is used. It is therefore impossible to have one input component set to Rounded corner=True and another set to Rounded corner=False within the same product/service.
2
+
1
3
**`False`** The square rendering corresponds to Orange's historical style. It conveys the brand's sense of seriousness, robustness and utility-driven. It remains the default style for our digital interface components.
2
4
3
5
**`True`** The rounded rendering offers flexibility without sacrificing the attribution to the brand. It helps anchoring the service in a reality where the visual codes of the mobile area tends to rub off on all interfaces. Use rounded corners for a softer, more approachable, friendly and tactile feel.
6
+
7
+
This option is technically not available for all brand themes. Here's the list of rounded corners availability by brand theme:
When losing focus, the truncation behavior of the input area differs depending on the technical environment. It's important to respect the native behaviors designed to handle truncation:
2
+
3
+
* On web, by default (even if the project retains control over this setting), if the text volume exceeds the visible width of the field, the input displays the end of the text (right-aligned) and the beginning of the text becomes invisible (masked on the left).
4
+
There should be no visual truncation indicator (...).
5
+
This choice is intentional because, for many fields, showing the end often makes it easier to identify the value (file names, paths, emails).
6
+
* On Android, by default (even if the project retains control over this setting), the behavior is the same as on the web.
7
+
* On iOS, it is the opposite: the input area truncates the value on the right with a visual truncation indicator (...).
8
+
9
+
**⚠️ In all cases:** the entire text must remain accessible when the field regains focus:
10
+
* Either by refocusing the field, the text becomes horizontally scrollable again (the blinking cursor is visible).
11
+
* Or via a tooltip on hover in certain desktop contexts.
Copy file name to clipboardExpand all lines: components/control/password_input/figma/password_input_changelog.md
+6Lines changed: 6 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,5 +1,11 @@
1
1
| Date | Number | Notes | Designer |
2
2
|------|--------|-------|----------|
3
+
| May 22, 2026 | 1.3.1 | <ul><li>Version 2.6 of the design tokens is required for the development of this update.<li>For "Loading" state<ul><li>Loading state button was updated<ul><li>Absolute positioning has been removed and replaced with Auto Layout.<ul><li>The container now uses: ouds/button/space/inset/icon-only-default</ul><li>Inside the container, the Circular Progress Indicator uses: ouds/button/space/inset/progress-indicator-only-default</ul></ul></ul> | Anton Astafev |
4
+
| Apr 22, 2026 | 1.3.0 | <ul><li>The input text reference changes from a regular weight (font-weight-label-default) to a medium weight (font-weight-label-moderate).<li>Removal of the component's max-width to avoid blocking certain layouts and to provide greater flexibility of use. The max-width values remain available in the design documentation.<li>Add spacing tokens between the label and the asterisk:<ul><li>control-text-input-space-column-gap-📄_label-asterisk<li>control-text-input-space-column-gap-📄_label-small-asterisk</ul></ul> | Anton Astafev |
Copy file name to clipboardExpand all lines: components/control/password_input/figma/password_input_overview.md
+92-2Lines changed: 92 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -19,9 +19,20 @@ While the primary goal is to enhance privacy and security, the field may also in
19
19
20
20
## Rounded corner
21
21
22
-
**`False`** For a square finish.
22
+
Even though in Figma this rendering option is available and editable from the properties of each input component, the configuration of this rendering option is actually transversal across the entire product/service in which the component is used. It is therefore impossible to have one input component set to Rounded corner=True and another set to Rounded corner=False within the same product/service.
23
23
24
-
**`True`** For a finish with rounded corner. To be favored in more emotional, immersive contexts or those tied to specific visual identities. For standard or business-oriented journeys, keep the default corners. This evolution addresses the need for flexibility in adapting the design to certain brand contexts.
24
+
**`False`** The square rendering corresponds to Orange's historical style. It conveys the brand's sense of seriousness, robustness and utility-driven. It remains the default style for our digital interface components.
25
+
26
+
**`True`** The rounded rendering offers flexibility without sacrificing the attribution to the brand. It helps anchoring the service in a reality where the visual codes of the mobile area tends to rub off on all interfaces. Use rounded corners for a softer, more approachable, friendly and tactile feel.
27
+
28
+
This option is technically not available for all brand themes. Here's the list of rounded corners availability by brand theme:
29
+
30
+
| Brand theme | Status |
31
+
|---|---|
32
+
| Orange | ✓ Available |
33
+
| Orange Compact | ✓ Available |
34
+
| Sosh | ⚠️ Unavailable |
35
+
| Wireframe | ⚠️ Unavailable |
25
36
26
37
---
27
38
@@ -96,3 +107,82 @@ Hiding a label is a design choice that must balance visual simplicity and clarit
96
107
**Helper text** Supporting text conveys additional information about the input field, such as how it will be used. It should ideally only take up a single line, though may wrap to multiple lines if required, and be either persistently visible or visible only on focus.
97
108
98
109
---
110
+
111
+
## ⚠️ Mandatory field indication
112
+
113
+
**If all fields are mandatory (several fields present):**
114
+
1. Display the message "All fields are mandatory." at the top.
115
+
2. Do not use an asterisk (*) at the end of each field label, nor the word "mandatory."
116
+
117
+
**If not all fields are mandatory (and there are several fields present):**
118
+
1. Display the message "All fields marked with an * are mandatory." at the top.
119
+
2. Use an asterisk (*) at the end of each mandatory field label.
120
+
**⚠️ Important:**
121
+
* In Figma, the asterisk must be entered manually by designers in the label text.
122
+
UI rendering of the asterisk: **font-weight-bold + color-content-negative (red)**.
123
+
* Technically, for web/iOS/Android, the asterisk is positioned in a dedicated container after the label text.
124
+
Spacing between label and asterisk:
125
+
Empty state → 4px
126
+
Other states (reduced label) → 3px
127
+
If the label is truncated due to a large amount of text, the asterisk must remain visible at the end of the field.
128
+
3. Either the technology allows a 'required' attribute to be managed on the fields (usually in Web), in which case any asterisks must be hidden from users using assistive technologies,
129
+
Or the technology does not allow the mandatory nature of the field to be indicated. In this case, the asterisk must be vocalised as well as a 'mandatory' mention.
130
+
Please refer to the technical documentations for more information.
131
+
4. Depending on the use case, an 'optional' label can be added to non-mandatory fields.
132
+
133
+
If there is only one field in the form, or if the mandatory nature is obvious (such as login/password), no mention is necessary since the fields are essential to the form's functionality.
134
+
135
+
---
136
+
137
+
## ⚠️ Truncated input area
138
+
139
+
When losing focus, the truncation behavior of the input area differs depending on the technical environment. It's important to respect the native behaviors designed to handle truncation:
140
+
141
+
* On web, by default (even if the project retains control over this setting), if the text volume exceeds the visible width of the field, the input displays the end of the text (right-aligned) and the beginning of the text becomes invisible (masked on the left).
142
+
There should be no visual truncation indicator (...).
143
+
This choice is intentional because, for many fields, showing the end often makes it easier to identify the value (file names, paths, emails).
144
+
* On Android, by default (even if the project retains control over this setting), the behavior is the same as on the web.
145
+
* On iOS, it is the opposite: the input area truncates the value on the right with a visual truncation indicator (...).
146
+
147
+
**⚠️ In all cases:** the entire text must remain accessible when the field regains focus:
148
+
* Either by refocusing the field, the text becomes horizontally scrollable again (the blinking cursor is visible).
149
+
* Or via a tooltip on hover in certain desktop contexts.
150
+
151
+
---
152
+
153
+
## Multiline and responsiveness
154
+
155
+
**Multiline**
156
+
In its "Empty" state (without a placeholder), the label of this component allows two lines of text editing. However, it is recommended not to exceed one line of text.
157
+
Apart from the case described above, this component doesn't allow multi-line text editing (whether for the label, placeholder or input).
158
+
As a result, and in order to maintain a consistent and uniform height across multiple components, the presence of an excessive amount of text (in the label, placeholder, or input) will cause the text to be truncated so that only a single line remains visible for each element.
159
+
Additionally, allowing multi-line text editing would create confusion with the "Text area" component.
160
+
161
+
**Max-width vs full-width**
162
+
For greater flexibility, this component doesn't have a default max-width. To avoid exceeding a width that would degrade readability and the perception of a compact interactive element, we recommend applying **a max-width of around 480px.**
163
+
For mobile or tablet use (or if the component is positioned inside a specific container), it is possible to set this component to use the full available width (of the screen or the container).
164
+
Please note that this behavior is not the default rule; it may be preferred if the template allows it (to improve user comfort or for better page structure/hierarchy).
165
+
166
+
**User zoom in/out**
167
+
The behavior of the text during user zoom in/out must follow a fundamental principle: the text must remain readable, accessible, and must never break the structure or lose information.
168
+
However, "Text input" components present an exception regarding the loss of textual information following the activation of user zoom, since text truncation (label, placeholder, input text) is exceptionally allowed and enabled.
169
+
* The text must always scale proportionally with user zoom. Text resizing must never be blocked.
170
+
* The component's height and width must be flexible, never fixed, in order to automatically adapt its dimensions according to the level of zoom.
171
+
* In order to preserve the minimun interactive area during user zoom out, this component have a min-width **of 240px** and a min-height **of 60px**.
172
+
* Even if, the component has a max-height or a max-width for resizing control purposes, technically, during user zoom in, these limitations are not fixed but must be scalable in order to adapt to the user's zoom level.
173
+
* In its "Leading icon" variant, user zoom in/out doesn't affect the size of the icons; they remain fixed in size (decorative use).
174
+
* As the error icon is functional, it must follow the same rules as text.
175
+
* The behaviors of the button (layout: icon only) component during user zoom are available in the corresponding documentation. [Learn more about the behavior of the button component.](https://www.figma.com/design/QtOWrH1m3RHOAkfyy0XFil?node-id=92394-14049)
176
+
177
+
---
178
+
179
+
## Rich text
180
+
181
+
***Strong text**
182
+
* Strong text can be used sparingly to highlight key information within the content. Text is allowed using the corresponding "Strong" token (e.g. Label/Medium/Strong and Label/Large/Strong) depending on the selected text style.
183
+
* No other text styles or custom font weights should be used.
184
+
185
+
***⚠️ Underline text**
186
+
* Underlined text must not be applied manually (e.g. in helper text), as it is commonly associated with hyperlinks and may mislead users.
0 commit comments