Våra formulärfält följer vår enkla formspråk utan att ge avkall på sin
tydlighet. De görs alltid i samma storlek och texten sätts alltid i svart för
god kontrast. Det gäller även förklaringstexten vid aktiva fält. Färg används
för att visa felvaliderade fält, alltid tillsammans med en ikon och eventuell
felbeskrivning. Av tillgänglighetsskäl får aktiva fält en fetare svart ram vid
interaktion – samma sak gäller vid hover. Formulärfält bör alltid ligga mot vitt
för att säkerställa rätt kontrast.
Accessibility
You must provide a unique id to the TextField. This is necessary for it to work correctly with screen readers.
The TextField should have a good visible label so users know what to input. Use the rounded variant sparingly and only when you have a good reason to do so because it does not have a visible label.
Make use of the autoComplete attribute to identify the type of date that the user should enter. This helps improve the accuracy of browser autofill functionality, and is mandatory in WCAG 2.2. Use the section- prefix to handle mltiple fields of the same type.
Be very careful with autoFocus! It moves screen reader users' focus to the field by force, which can be jarring. It is only suitable in contexts where there is only one or two fields on the page, such as a login form.
Provide a helpful and descriptive errorHelperText text that has enough information for the user to understand what went wrong and how they should fix it.
Use the numeric prop when asking for numeric values. This ensures that the right keyboard is displayed on mobile devices.
Våra formulärfält följer vår enkla formspråk utan att ge avkall på sin tydlighet. De görs alltid i samma storlek och texten sätts alltid i svart för god kontrast. Det gäller även förklaringstexten vid aktiva fält. Färg används för att visa felvaliderade fält, alltid tillsammans med en ikon och eventuell felbeskrivning. Av tillgänglighetsskäl får aktiva fält en fetare svart ram vid interaktion – samma sak gäller vid hover. Formulärfält bör alltid ligga mot vitt för att säkerställa rätt kontrast.
Accessibility
idto the TextField. This is necessary for it to work correctly with screen readers.autoCompleteattribute to identify the type of date that the user should enter. This helps improve the accuracy of browser autofill functionality, and is mandatory in WCAG 2.2. Use the section- prefix to handle mltiple fields of the same type.autoFocus! It moves screen reader users' focus to the field by force, which can be jarring. It is only suitable in contexts where there is only one or two fields on the page, such as a login form.errorHelperTexttext that has enough information for the user to understand what went wrong and how they should fix it.numericprop when asking for numeric values. This ensures that the right keyboard is displayed on mobile devices.