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

<nve-input label="Har 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

<nve-input readonly value="Dette får du ikke endret"></nve-input>

<nve-input 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.

step i kombinasjon med number helper deg å håndterer desimaltall. Du kan bruke både komma og punktum som desimalskilletegn. Her er noen eksempler:

<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>
<nve-input type="datetime-local" label="Skriv inn eller velg dato og tidspunkt"></nve-input>

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>

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	Attributt-synk	Type	Standardverdi	Arvet fra	Beskrivelse
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
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
firstUpdated
updated	changedProperties: any
updateInputId
makeInvalid
resetValidation
showErrorMessage
showErrorIcon
hideErrorIcon
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.