FnrInput

FnrInput er et vanlig nummerisk Input-felt som har innebygget funksjonalitet for validering av fødselsnummer.

NPM-pakke

Navn:nav-frontend-skjema
Siste versjon:3.0.37
Peer dependencies:@navikt/fnrvalidator classnames nav-frontend-js-utils nav-frontend-lenker nav-frontend-skjema-style nav-frontend-typografi prop-types react

Installering

npm install nav-frontend-skjema @navikt/fnrvalidator classnames nav-frontend-js-utils lodash.throttle prop-types react nav-frontend-lenker nav-frontend-lenker-style nav-frontend-core nav-frontend-skjema-style nav-frontend-paneler-style nav-frontend-typografi-style nav-frontend-typografi --save

Kopiert!


yarn add nav-frontend-skjema @navikt/fnrvalidator classnames nav-frontend-js-utils lodash.throttle prop-types react nav-frontend-lenker nav-frontend-lenker-style nav-frontend-core nav-frontend-skjema-style nav-frontend-paneler-style nav-frontend-typografi-style nav-frontend-typografi

Kopiert!

Moduler

Import

import { FnrInput } from 'nav-frontend-skjema';

Kopiert!

React props

PropertyTypeDefaultRequiredDescription
bredde
"fullbredde" | "XXL" | "XL" | "L" | "M" | "S" | "XS" | "XXS"
-
Bredden til inputfeltet
className
string
-
Classname som blir satt på komponentwrapperen
description
ReactNode
-
Ekstrainformasjon under overskrift
feil
ReactNode
-
Hvis skjemaet har feil sender man inn et objekt med en feilmelding
id
string
-
Id for inputfelt, hvis id ikke er satt brukes name eller en tilfeldig guid
inputClassName
string
-
Classname som blir satt på input-elementet
inputRef
(element: HTMLInputElement) => any
-
Referanse til selve inputfeltet. Brukes for eksempel til å sette fokus
label
ReactNode
-
Label for tekstfeltet
mini
boolean
-
Tettere, 32px høy variant
name
string
-
Name for inputfelt, hvis name ikke er satt brukes id eller en tilfeldig guid
onValidate
(isValid: boolean) => void
-
Komponenten auto-validerer seg selv på onChange, og videreformidler valid-verdi via denne callback metoden.