Principles Foundation Accessibility Design System Guidelines Deutsch Français Italiano English Our design principles User-centred Recognisable Inclusive Reduced Holistic Self-explanatory Task-oriented Appropriate SBB Brand portal Logo Digital clock Rights of use Base colors Additional colors Off brand colors Icons Timetable icons Pictograms About accessibility Über diesen Guide Contact Further information Product Owner User Research Interaction Design Visual Design Development Content Design Testing What is a design system? Designing Coding FAQ Help Process Contribution Contact Overview Base Components Overview Releases Design Tokens Components Overview Base Informations Overview Base Components Overview App Icons Power-Apps Digital banner ads SAP Design Guidelines AI Design: Basics Error Info

What does the component do?

It is part of the form-field component.

When should the component be used?

  • Only within the form-field component.
Form-Field
Anatomy

Anatomy of the component


Number Type Description Optional Info
1 Standard-HTML input No
1b Standard-HTML input Yes Placeholder
2 Standard-HTML input No
3 Component sbb-icon Yes Prefix
4 Component sbb-icon oder sbb-form-field-clear Yes Suffix
5 Component sbb-form-error No Datei auswählen
Demo Error
Error Negative
Error With Custom Icon And Long Message
Copy HTML to clipboard.
Implementation

The sbb-error component can be used to provide an error message in inputs components like the
sbb-checkbox-group and
sbb-radio-button-group,
or within the sbb-form-field.

Slots

It is possible to provide the error message via an unnamed slot;
the component displays an icon by default, that can be changed using the icon slot.

<sbb-error> This is a required field. </sbb-error>

<sbb-error>
  <sbb-icon name="pie-small" slot="icon"></sbb-icon>
  This is a required field.
</sbb-error>

Properties

Name Attribute Privacy Type Default Description
negative negative public boolean false Negative coloring variant flag.

Slots

Name Description
Use this slot to display the error message.
icon Use this slot to override the default error icon.