Hoppa till huvudinnehåll

TextField

Inmatningsfält, textfält, nummerfält, lösenordsfält
Version: 1.0.4
Versionslogg
Storybook
Referens

Introduktion​

Använd ett inmatningsfält när användaren ska fylla i kortare information, tex namn, personnummer eller epostadress. För längre inmatning används TextArea.

Installation och användning​

npm install @midas-ds/textfield
import { TextField } from '@midas-ds/textfield'

Validering​

TextField validerar automatiskt på type och isRequired eller ett eget pattern. Vi erbjuder även färdiga valideringar på typiska scenarion, mer om det längre ner.

Egen validering​

Det går också att definiera en egen funktion för validering:

Egna felmeddelanden​

Komponenten har flertalet inbyggda felmeddelanden beroende på vad som händer. Dessa går att justera genom att skicka in olika felmeddelanden bereoende på fel.

Läs mer om validering i React Arias dokumentation.

Personnummer​

Använd egenskapen validationType="ssn" för att slå på vår validering av personnummer. Valideringen är väldigt förlåtande mot användaren och accepterar alla möjliga versioner av ett giltigt personnummer.

Följande RegEx används
^(?:(?:19|20)?\d{2}(?:0[1-9]|1[0-2])(?:0[1-9]|[12]\d|3[01])|\d{4}(?:0[1-9]|1[0-2])(?:0[1-9]|[12]\d|3[01]))(?:[-+ ]?\d{4})?$

  • Frivilliga sekelsiffor: 19 eller 20 (?:19:20)?
  • Verifierar att det är minst två siffror i början av personnumret (ÅÅ)
  • Verifierar att MM är 01 - 12 (?:0[1-9]|1[0-2])
  • Verifierar att DD är 01 - 31 (?:0[1-9]|[12]\\d|3[01])
  • Tillåter avgränsare: +, -, blanksteg eller ingen, samt
  • Verifierar att det är fyra siffror efter avgränsaren (?:[-+ ]?\\d{4})?

Lösenord​

Sätt type={'password'} för att kunna visa och dölja inmatad text.

Riktlinjer​

Desktop​

Anpassa längden på inmatningsfält, tex med Grid eller Flex, så att det matchar förväntad längd på det användaren ska mata in. Ett svenskt postnummer är alltid 5 siffror och då bör fältet vara kort medan ett fält där användaren ska fylla i alla sina namn behöver vara långt

Beroenden​

  • react-aria-components@^1.1.0
  • @midas-ds/button@1.1.1