TextField

Inmatningsfält, textfält, nummerfält, lösenordsfält

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

npm
Yarn
pnpm

npm install @midas-ds/components

yarn add @midas-ds/components

pnpm add @midas-ds/components

import { TextField } from '@midas-ds/components'

Varianter

Lösenord

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

Validering

TextField validerar automatiskt på type, isRequired eller ett eget pattern samt våra fördefinerade mönster i validationType. Komponenten innehåller vissa förbestämda valideringsmönster för typiska format. Dessa läggs till löpande efter förfrågan och behov. Valideringen är alltid väldigt förlåtande mot användaren och accepterar alla möjliga versioner av ett formats regler. Dessa förklaras i detalj nedan.

Personnummer

Använd egenskapen validationType="ssn" för att slå på vår validering av 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})?.

Dossiernummer

Använd egenskapen validationType="dossnr" för att slå på vår validering av dossiernummer.

Följande RegEx används
/\d{1,2}[-+]?\d{6}(/\d{1,2})?$/

En eller två siffror d{1,2}.
Följt av frivillig del av skiljetecken, antingen ett - eller ett + [-+]?.
Följt av sex siffror d{6}.
Följt av frivillig del av / samt en eller två siffror (/\d{1,2})?.

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.

API

Namn	Typ	Standard	Beskrivning
children	`ReactNode`	-	The children of the component. A function may be provided to alter the children based on component state.
label	`string`	-	Specify label displayed above the TextField
description	`string`	-	Specify description displayed below the label
errorMessage	`string \| ((validation: ValidationResult) => string)`	-	Custom error messages
validationType	`RegExp \| "ssn" \| "dossnr"`	-	Enable validations or add your own regex
showCounter	`boolean`	`false`	Whether to show the character counter or not
isInvalid	`boolean`	-	Whether the value is invalid.
type	`"search" \| (string & {}) \| "text" \| "tel" \| "url" \| "email" \| "password"`	-	The type of input to render. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdeftype).
isDisabled	`boolean`	-	Whether the input is disabled.
id	`string`	-	The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
autoFocus	`boolean`	-	Whether the element should receive focus on render.
excludeFromTabOrder	`boolean`	-	Whether to exclude the element from the sequential tab order. If true, the element will not be focusable via the keyboard by tabbing. This should be avoided except in rare scenarios where an alternative means of accessing the element or its functionality via the keyboard is available.
name	`string`	-	The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).
value	`string`	-	The current value (controlled).
defaultValue	`string`	-	The default value (uncontrolled).
spellCheck	`string`	-	An enumerated attribute that defines whether the element may be checked for spelling errors. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck).
autoCorrect	`string`	-	An attribute that takes as its value a space-separated string that describes what, if any, type of autocomplete functionality the input should provide. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#autocomplete).
inputMode	`"none" \| "search" \| "text" \| "tel" \| "url" \| "email" \| "numeric" \| "decimal"`	-	Hints at the type of data that might be entered by the user while editing the element or its contents. See [MDN](https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute).
pattern	`string`	-	Regex pattern that the value of the input must match to be valid. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefpattern).
isReadOnly	`boolean`	-	Whether the input can be selected but not changed by the user.
isRequired	`boolean`	-	Whether user input is required on the input before form submission.
validate	`(value: string) => true \| ValidationError`	-	A function that returns an error message if a given value is invalid. Validation errors are displayed to the user when the form is submitted if `validationBehavior="native"`. For realtime validation, use the `isInvalid` prop instead.
autoComplete	`string`	-	Describes the type of autocomplete functionality the input should provide if any. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete).
maxLength	`number`	-	The maximum number of characters supported by the input. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefmaxlength).
minLength	`number`	-	The minimum number of characters required by the input. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefminlength).
validationBehavior	`"native" \| "aria"`	`'native'`	Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.
slot	`string`	-	A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent.
className	`string \| ((values: TextFieldRenderProps & { defaultClassName: string; }) => string)`	-	The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.
style	`CSSProperties \| ((values: TextFieldRenderProps & { defaultStyle: CSSProperties; }) => CSSProperties)`	-	The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.

Namn	Typ	Standard	Beskrivning
onFocus	`(e: FocusEvent<HTMLInputElement, Element>) => void`	-	Handler that is called when the element receives focus.
onBlur	`(e: FocusEvent<HTMLInputElement, Element>) => void`	-	Handler that is called when the element loses focus.
onFocusChange	`(isFocused: boolean) => void`	-	Handler that is called when the element's focus status changes.
onKeyDown	`(e: KeyboardEvent) => void`	-	Handler that is called when a key is pressed.
onKeyUp	`(e: KeyboardEvent) => void`	-	Handler that is called when a key is released.
onCopy	`ClipboardEventHandler<HTMLInputElement>`	-	Handler that is called when the user copies text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/oncopy).
onCut	`ClipboardEventHandler<HTMLInputElement>`	-	Handler that is called when the user cuts text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/oncut).
onPaste	`ClipboardEventHandler<HTMLInputElement>`	-	Handler that is called when the user pastes text. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/onpaste).
onCompositionEnd	`CompositionEventHandler<HTMLInputElement>`	-	Handler that is called when a text composition system completes or cancels the current text composition session. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionend_event).
onCompositionStart	`CompositionEventHandler<HTMLInputElement>`	-	Handler that is called when a text composition system starts a new text composition session. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionstart_event).
onCompositionUpdate	`CompositionEventHandler<HTMLInputElement>`	-	Handler that is called when a new character is received in the current text composition session. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/compositionupdate_event).
onChange	`(value: string) => void`	-	Handler that is called when the value changes.
onBeforeInput	`FormEventHandler<HTMLInputElement>`	-	Handler that is called when the input value is about to be modified. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/beforeinput_event).
onInput	`FormEventHandler<HTMLInputElement>`	-	Handler that is called when the input value is modified. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event).
onSelect	`ReactEventHandler<HTMLInputElement>`	-	Handler that is called when text in the input is selected. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/select_event).

Namn	Typ	Standard	Beskrivning
aria-haspopup	`boolean \| "true" \| "false" \| "menu" \| "listbox" \| "tree" \| "grid" \| "dialog"`	-	Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.
aria-controls	`string`	-	Identifies the element (or elements) whose contents or presence are controlled by the current element.
aria-label	`string`	-	Defines a string value that labels the current element.
aria-labelledby	`string`	-	Identifies the element (or elements) that labels the current element.
aria-describedby	`string`	-	Identifies the element (or elements) that describes the object.
aria-details	`string`	-	Identifies the element (or elements) that provide a detailed, extended description for the object.
aria-activedescendant	`string`	-	Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.
aria-autocomplete	`"list" \| "none" \| "inline" \| "both"`	-	Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made.
aria-errormessage	`string`	-	Identifies the element that provides an error message for the object.

Installation​

Exempelkod

Varianter​

Lösenord​

Exempelkod

Validering​

Exempelkod

Personnummer​

Exempelkod

Dossiernummer​

Exempelkod

Egen validering​

Exempelkod

Egna felmeddelanden​

API​

Props

Events

Tillgänglighet

Installation

Varianter

Lösenord

Validering

Personnummer

Dossiernummer

Egen validering

Egna felmeddelanden

API