nve-input

Et tekstfelt. Vil du ha info-ikon med hjelpetekst etter ledeteksten, putt en nve-label i label-slot. pill skal ikke brukes. TODO: Feltet blir bredere hvis validering feiler, fordi vi må ha plass til feil-ikonet.

Arvet fra SlInput.

Denne komponenten bygger på en Shoelace-komponent. Sjekk også dokumentasjonen i Shoelace for å få full oversikt over hvordan komponenten funker.

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:

<template>
  <nve-input
    type="number"
    :value="inputValue"
    @input="inputValue = $event.target.value"
    label="Her vil value være av type string, selv om vi har satt type = number"
  >
  </nve-input>
  typeof '{{ inputValue }}' = {{ typeof inputValue}}
  <br/><br/>
  <nve-input
    type="number"
    :value="numberInputValue.toString()"
     @input="(event) => numberInputValue = Number(event.target.value)"
    label="Her konverterer vi value automatisk til number">
  </nve-input>
  typeof {{ numberInputValue }} = {{ typeof numberInputValue}}
</template>

<script setup lang="ts">
import { ref } from "vue";
import "nve-designsystem/components/nve-input/nve-input.component";
const inputValue = ref("");
const numberInputValue = ref(0);
</script>

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>

Spor

Navn	Beskrivelse
label	The input's label. Alternatively, you can use the `label` attribute.
prefix	Used to prepend a presentational icon or similar element to the input.
suffix	Used to append a presentational icon or similar element to the input.
clear-icon	An icon to use in lieu of the default clear icon.
show-password-icon	An icon to use in lieu of the default show password icon.
hide-password-icon	An icon to use in lieu of the default hide password icon.
help-text	Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.

Hendelser

Navn	Arvet fra	Beskrivelse
sl-blur	SlInput	Emitted when the control loses focus.
sl-change	SlInput	Emitted when an alteration to the control's value is committed by the user.
sl-clear	SlInput	Emitted when the clear button is activated.
sl-focus	SlInput	Emitted when the control gains focus.
sl-input	SlInput	Emitted when the control receives input.
sl-invalid	SlInput	Emitted when the form control has been checked for validity and its constraints aren't satisfied.

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
input	HTMLInputElement	SlInput
title	string = ''	SlInput
type	| 'date' | 'datetime-local' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url' = 'text'	SlInput	The type of input. Works the same as a native `<input>` element, but only a subset of types are supported. Defaults to `text`.
name	string = ''	SlInput	The name of the input, submitted as a name/value pair with form data.
value	string = ''	SlInput	The current value of the input, submitted as a name/value pair with form data.
defaultValue	string = ''	SlInput	The default value of the form control. Primarily used for resetting the form control.
size	'small' | 'medium' | 'large' = 'medium'	SlInput	The input's size.
filled	boolean = false	SlInput	Draws a filled input.
pill	boolean = false	SlInput	Draws a pill-style input with rounded edges.
label	string = ''	SlInput	The input's label. If you need to display HTML, use the `label` slot instead.
helpText	string = ''	SlInput	The input's help text. If you need to display HTML, use the `help-text` slot instead.
clearable	boolean = false	SlInput	Adds a clear button when the input is not empty.
disabled	boolean = false	SlInput	Disables the input.
placeholder	string = ''	SlInput	Placeholder text to show as a hint when the input is empty.
readonly	boolean = false	SlInput	Makes the input readonly.
passwordToggle	boolean = false	SlInput	Adds a button to toggle the password's visibility. Only applies to password types.
passwordVisible	boolean = false	SlInput	Determines whether or not the password is currently visible. Only applies to password input types.
noSpinButtons	boolean = false	SlInput	Hides the browser's built-in increment/decrement spin buttons for number inputs.
form	string = ''	SlInput	By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you to place the form control outside of a form and associate it with the form that has this `id`. The form must be in the same document or shadow root for this to work.
required	boolean = false	SlInput	Makes the input a required field.
pattern	string	SlInput	A regular expression pattern to validate input against.
minlength	number	SlInput	The minimum length of input that will be considered valid.
maxlength	number	SlInput	The maximum length of input that will be considered valid.
min	number | string	SlInput	The input's minimum value. Only applies to date and number input types.
max	number | string	SlInput	The input's maximum value. Only applies to date and number input types.
step	number | 'any'	SlInput	Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is implied, allowing any numeric value. Only applies to date and number input types.
autocapitalize	'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters'	SlInput	Controls whether and how text input is automatically capitalized as it is entered by the user.
autocorrect	'off' | 'on'	SlInput	Indicates whether the browser's autocorrect feature is on or off.
autocomplete	string	SlInput	Specifies what permission the browser has to provide assistance in filling out form field values. Refer to [this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.
autofocus	boolean	SlInput	Indicates that the input should receive focus on page load.
enterkeyhint	'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'	SlInput	Used to customize the label or icon of the Enter key on virtual keyboards.
spellcheck	boolean = true	SlInput	Enables spell checking on the input.
inputmode	'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'	SlInput	Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual keyboard on supportive devices.
valueAsDate		SlInput	Gets or sets the current value as a `Date` object. Returns `null` if the value can't be converted. This will use the native `<input type="{{type}}">` implementation and may result in an error.
valueAsNumber		SlInput	Gets or sets the current value as a number. Returns `NaN` if the value can't be converted.
validity		SlInput	Gets the validity state object
validationMessage		SlInput	Gets the validation message

Metoder

Navn	Parametre	Returtype	Arvet fra	Beskrivelse
handleDisabledChange			SlInput
handleStepChange			SlInput
handleValueChange			SlInput
focus	options: FocusOptions		SlInput	Sets focus on the input.
blur			SlInput	Removes focus from the input.
select			SlInput	Selects all the text in the input.
setSelectionRange	selectionStart: number selectionEnd: number selectionDirection: 'forward' | 'backward' | 'none'		SlInput	Sets the start and end positions of the text selection (0-based).
setRangeText	replacement: string start: number end: number selectMode: 'select' | 'start' | 'end' | 'preserve'		SlInput	Replaces a range of text with a new string.
showPicker			SlInput	Displays the browser picker for an input element (only works if the browser supports it for the input type).
stepUp			SlInput	Increments the value of a numeric input type by the value of the step attribute.
stepDown			SlInput	Decrements the value of a numeric input type by the value of the step attribute.
checkValidity			SlInput	Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.
getForm		HTMLFormElement | null	SlInput	Gets the associated form, if one exists.
reportValidity			SlInput	Checks for validity and shows the browser's validation message if the control is invalid.
setCustomValidity	message: string		SlInput	Sets a custom validation message. Pass an empty string to restore validity.

Deler

Navn	Beskrivelse
form-control	The form control that wraps the label, input, and help text.
form-control-label	The label's wrapper.
form-control-input	The input's wrapper.
form-control-help-text	The help text's wrapper.
base	The component's base wrapper.
input	The internal `<input>` control.
prefix	The container that wraps the prefix.
clear-button	The clear button.
password-toggle-button	The password toggle button.
suffix	The container that wraps the suffix.