Invalid input number displays an icon even when the width is too small for content

[imagoiq]

https://github.com/swisspost/design-system/assets/12294151/5aaac88b-dffe-4342-9c5e-f6760b7acbff

For the context (the error icon has been disabled temporarily):

[gfellerph]

• This could be a input group, validation should be done at group level, but displaying the icon there requires custom code
• Discuss with UX
• Multiple requests because of big error icons

[imagoiq]

I'm wondering if this icon is really necessary. In practice, we should have a validation message (not like in this video). So we have an element indicating that's something is wrong for colour-blind people. Gov.uk seems to follow this way: https://design-system.service.gov.uk/components/error-summary/ https://design-system.service.gov.uk/components/text-input/#error-messages

But I also agree with the fact that icon is a good addition and easier to get the context. Another idea would be to include the icon as a prefix of the validation message.

Another question: should we treat this pattern as something rare and unique, and have its own solution?

Alternatively, perhaps we should design or think differently this pattern and rather have only one field? https://chriscoyier.net/2023/12/04/html-css-for-a-one-time-password-input/ https://designsystem.digital.gov/components/input-mask/

[imagoiq]

Result of discussion in the "Design System Patterns Discussion" meeting of today: have a UX look at the use case, it's possible that the use case can be improved without changing the pattern.