nve-input
Arvet fra SlInput.
Feil / oppgaver / PR
Ingen som vi vet om. Hvis du finner noe muffens, registrer en feil under Issues i Github og merk den med nve-input.
<nve-input label="Her kan du skrive akkurat hva du vil"></nve-input>
Eksempler
Mørk bakgrunn
Bruk filled
for mørk bakgrunnsfarge
<nve-input value="filled" filled></nve-input>
<nve-input value="ikke filled"></nve-input>
Verktøyhint
nve-input
kan ha ledetekst med verktøyhint hvis du putter ledeteksten i sporet label
<nve-input>
<nve-label value="Svev over ikonet" slot="label" tooltip="Hjelpetekst"><nve-label>
</nve-input>
Sletteknapp
Bruk clearable
for å vise en sletteknapp bak teksten
<nve-input value="Slett dette ved trykke ikonet til høyre" clearable></nve-input>
Deaktivering
Bruk disabled
for å deaktivere feltet. Du kan også vise et låse-ikon ved å legge nve-icon
i sporet suffix
.
<nve-input value="aktiv"></nve-input>
<nve-input disabled value="deaktivert"></nve-input>
<nve-input disabled value="deaktivert med ikon">
<nve-icon slot="suffix" name="Lock"></nve-icon>
</nve-input>
Skrivebeskyttet
Bruk readonly
for å stenge mulighet for å endre innholdet. Input-feltet får da et ikon dersom suffix-slot ikke er satt
<nve-input id="in1" readonly value="Dette får du ikke endret"></nve-input>
<nve-input id="in2" readonly value="Dette får du heller ikke endret, og vi har lagt på et ikon spesifikt her">
<nve-icon slot="suffix" name="asterisk" />
</nve-input>
<nve-input id="in3" value="men dette kan du endre"></nve-input>
Obligatorisk
Bruk required
for å tvinge bruker til å skrive noe og legg inn en feilmelding i errorMessage
om du ikke vil ha standard-feilmeldinga. Bruk requiredlabel
hvis du vil vise noe annet enn *Obligatorisk
. Feltet må ligge i en <form>
for at validering skal funke.
<!-- Bruker preventDefault så ikke sida lastes på nytt når du trykker på knappen -->
<form onsubmit="event.preventDefault();">
<nve-input label="Hva synes du?" required errorMessage="Her må du skrive noe"></nve-input>
<nve-input label="What do you think?" required requiredLabel="*Required" errorMessage="Please answer"></nve-input>
<nve-button type="submit">Submit</nve-button>
</form>
Constraint validation
I tillegg til required
støtter vi de samme reglene som SlInput, men pass på at du setter en feilmelding i errorMessage
. Feltet må ligge i en <form>
for at validering skal funke. Her er noen eksempler.
<!-- Bruker preventDefault så ikke sida lastes på nytt når du trykker på knappen -->
<form onsubmit="event.preventDefault();">
<nve-input
required
minlength="3"
maxLength="5"
label="Minimum 3 og maks 5 tegn"
errorMessage="Mellom 3 og 5 tegn her, takk"
></nve-input>
<nve-input
required
type="number"
min="42"
max="42"
label="Svaret på livet, universet og alt"
errorMessage="Helt feil!"
></nve-input>
<nve-input
required
type="date"
min="1980-01-01"
max="1989-12-31"
label="Velg en dato på 80-tallet"
errorMessage="Her er det bare 80-tallet som gjelder"
></nve-input>
<nve-button type="submit" variant="primary">Submit</nve-button>
</form>
Datatyper
I tillegg til tekst, støtter vi de samme datatypene som SlInput
som igjen støtter de fleste datatypene til html sin <input>
.
Legg merke til at value
vil være string
, uavhengig av hvilken type
du har satt. Du må selv konvertere value
til riktig type, se eksemplet i Vue nedenfor:
Tall
step
i kombinasjon med type="number"
helper deg å håndtere desimaltall. Du kan bruke både komma og punktum som desimalskilletegn.
<nve-input type="number" label="Kun heltall"></nve-input>
<nve-input type="number" step="0.1" label="Maks en desimal"></nve-input>
<nve-input type="number" step="any" label="Bruk så mange desimaler du vil"></nve-input>
Dato / tid
Du kan bruke alle dato-typer som html <input>
støtter. Nedenfor er det noen eksempler. Det finnes ikke en egen type for å velge kun år, men du kan sette type til number
og evt. min- og maks for å tvinge folk til å velge / skrive inn et fornuftig årstall. step
kan også brukes i kompinasjon med enkelte datotyper.
<nve-input type="datetime-local" label="Skriv inn eller velg dato og tidspunkt"></nve-input>
<nve-input type="date" label="Skriv inn eller velg dato"></nve-input>
<nve-input type="time" label="Skriv inn eller velg tidspunkt"></nve-input>
<nve-input type="month" label="Skriv inn eller velg måned og år"></nve-input>
<nve-input type="number" label="Skriv inn eller velg år" min="1900" max="2100" class="year-input"> </nve-input>
<script>
// setter dette året som standard-valg i år-input'en
const yearInput = document.querySelector('.year-input');
yearInput.value = new Date().getFullYear();
</script>
Størrelse
Bruk size
for å velge høyde. Ledeteksten tilpasses automatisk, mens skrifttypen til innholdet er fast uansett. medium
er standard.
<nve-input size="small" label="small" value="innhold"></nve-input>
<nve-input label="medium" value="innhold"></nve-input>
<nve-input size="large" label="large" value="innhold"></nve-input>
Autocomplete
Bruk autocomplete
for å slå av autocomplete-funksjonalitet i browser. Denne setter også aria-autocomplete="none"
dersom satt til false
<nve-input value="" name="firstname" label="Autocomplete: på"></nve-input>
<nve-input value="" autocomplete="false" name="firstname" label="Autocomplete: av"></nve-input>
Egenskaper
Navn | Type | Arvet fra | Beskrivelse | Reflected |
---|---|---|---|---|
requiredLabel | string = '*Obligatorisk' | Tekst som vises for å markere at et felt er obligatorisk | ||
errorMessage | string | undefined | Feilmelding som vises hvis validering feiler | ||
testId | string = '' | Brukes for å kunne identifisere komponenten i tester | ||
inputId | string | undefined | Brukes for å kunne identifisere komponenten | ||
noValidation | boolean = false | Brukes for å hindre nettleseren fra å validere feltet | ||
alreadyInvalid | boolean = false |