Hoppa till huvudinnehåll

TextField

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

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 valideringsmetoder beroende på vad som händer. Dessa går att justera genom att skicka in olika felmeddelanden bereoende på fel.

<TextField
  label='Skriv in frukt'
  errorMessage="Du måste skriva 'frukt'!"
  isRequired
  validate={value => (value === 'frukt' ? true : 'Du måste skriva "frukt"')}
  errorMessage={validation => {
    if (validation.validationDetails.valueMissing) return 'Det måste finnas en frukt.'
    if (validation.validationDetails.badInput) return 'Det där är inte en frukt.'
    if (validation.validationDetails.customError) return 'Du måste skriva frukt.'

    // Det finns flertalet typer på validationDetails
    // if (validation.validationDetails.patternMismatch) return "Det där ser inte ut som en frukt.";
    // if (validation.validationDetails.rangeOverflow) return "Nu blev det nog för många frukter.";
    // med flera

    return 'Jag vet inte riktigt vad som blev fel men jag vill ha en frukt.'
  }}
/>

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.

Beroenden

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

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.2.1
  • react@^18.2.0