Formulär
Textfält och val
Fältet har en tydlig grå kant runt hela fältet så att det syns att man kan skriva där. Kanten byter färg efter tillstånd. Inga rundade hörn.
<div class="mg-field">
<label class="mg-field__label" for="email">E-post</label>
<input class="mg-input is-error" id="email" type="email">
<span class="mg-field-msg mg-field-msg--error">Ange en giltig e-postadress</span>
</div>| State | Kant | Klass |
|---|---|---|
| Vila | Grå, hel ram | .mg-input |
| Fokus | Blå (accent som funktion) | automatiskt |
| Fel | Röd + röd meddelandetext | .is-error |
| Giltigt | Grön + grön meddelandetext | .is-success |
| Inaktivt | Dämpad, ej klickbar | disabled |
- En etikett per fält, ovanför fältet, Condensed fet versaler
- Felmeddelandet säger vad användaren ska göra: ”Ange en giltig e-postadress”
- Validera vid blur (när användaren lämnar fältet)
- Textarea får bara växa i höjdled
- Platshållartext i stället för etikett
- Rundade hörn eller skuggor på fält
- Felmeddelande bara i färg utan text
- Alla fält röda samtidigt
- Fältets kantfärg som state är ett av få tillåtna undantag från ”accent är aldrig kant”, eftersom den är funktionell
Formulär
Checkbox, radio och uppladdning
Checkbox för flerval, radio för enval. De fylls med magenta vid val. Uppladdningszonen är en polygon med streckad kant som signalerar ”lägg något här”.
- Checkbox när flera val är möjliga, radio när exakt ett ska väljas
- Berätta tillåtna filtyper och max storlek i uppladdningszonen
- Radio för flerval
- Uppladdning utan besked om format och storlek
Feedback
Status, notiser och inline-feedback
Fyra tillstånd, alltid i accentfärg som fyllnad. Pills för status i listor, toast för tillfälliga besked, inline-feedback intill det den gäller.
Pills
Toast
Visas 3–5 sekunder i nedre högra hörnet. Beskriv vad som hände och vad användaren ska göra.
Inline-feedback
Fylld ruta med polygonform, direkt intill det den gäller. Aldrig en ram eller en kantlinje.
| Tillstånd | Färg | Pill-text |
|---|---|---|
| Fel | Röd #E3012F | Fel |
| Klart | Grön #1BA660 | Klar |
| Bearbetar / info | Blå #31ABE2 | Bearbetar |
| Varning | Gul #FFDC00 (svart text) | Varning |
| Inaktivt | Grå | Ej tillgänglig |
- Beskriv vad som hände: ”Bilden kunde inte skapas”
- Lägg till vad användaren ska göra: ”Använd JPG, PNG eller WEBP”
- Inga utropstecken, ingen ”successfully”
- ”Error 500”
- Accentfärgad kant till vänster om ett meddelande
- Toast som ligger kvar för alltid
Feedback
Laddning
Spinner för kort, obestämd väntan (under 3 sekunder), progressbar när antalet steg är känt, skeleton vid sidladdning.
- Spinner under 3 sekunder, progressbar eller overlay med text över 3 sekunder
- Visa ett skeleton som liknar innehållet som kommer
- Spinner utan text vid långa operationer
- Blockera hela sidan för en kort laddning
- Spinner, radioknappar och skeleton-shimmer är runda eller har gradient av funktionella skäl. Det är de enda undantagen
Knappar i formulär
Knappens färg följer handlingen
I formulär och verktyg väljs knappens färg efter vad den gör, inte efter var den sitter.
| Handling | Variant | Färg |
|---|---|---|
| Skapa, generera, spara, ladda ner, skicka | .mg-btn--primary | Magenta, vit text |
| Återställ, avbryt, stäng, rensa | .mg-btn--secondary | Rose-200, svart text |
- Sekundärknappen till höger om primärknappen
- Ikon till vänster om texten med 8 px mellanrum (
.mg-btn--icon)
- Mer än en primärknapp per vy
- Röd knapp för ”Avbryt”