Formulär

Obligatorisk vs valfri

Huvudregeln är att bara fråga användaren om uppgifter som är nödvändiga för att ta ett beslut eller liknande. Följer vi den regeln faller det sig naturligt att de flesta fält i ett formulär är obligatoriska. Det ger oss grundregeln: Vi markerar endast eventuella valfria fält med texten ”(valfritt)”.

<TextField
  label="Fullständigt namn"
  description="För och efternamn"
  isRequired
  errorMessage="Detta är ett obligatoriskt fält"
/>
<TextField
  label="Favoritfrukter (Valfritt)"
  description="Kan lämnas tomt"
/>

Fullständigt namnFör och efternamn

Favoritfrukter (Valfritt)Kan lämnas tomt

Undantag 1: Valfria fält är fler än de obligatoriska

Markera obligatoriska fält med svart asterisk och informera över formuläret att obligatoriska fält markeras med en asterisk.

Undantag 2: Valfria fält och obligatoriska fält är (ungefär) lika många

Markera valfria fält med ”(valfritt)” och obligatoriska fält med svart asterisk och informera över formuläret att obligatoriska fält markeras med en asterisk.

Position av felmeddelande

Standard

Som standard visas eventuella felmeddelanden ovanför våra formulärelement.

<TextField
  label='Skriv ditt fullständiga namn'
  description='Både för och efternamn'
  isRequired
  errorMessage='Detta är ett obligatoriskt fält'
/>

Skriv ditt fullständiga namnBåde för och efternamnDetta är ett obligatoriskt fält

Felmeddelande under element

För att visa felmeddelanden under elementet använd attributet errorPosition med värdet bottom, attributet accepteras av samtliga formulärkomponenter.

<TextField
  label='Skriv ditt fullständiga namn'
  description='Både för och efternamn'
  errorPosition='bottom'
  isRequired
  errorMessage='Detta är ett obligatoriskt fält'
/>

Skriv ditt fullständiga namnBåde för och efternamn

Detta är ett obligatoriskt fält