Input Wrapper | Punkt | Origo

Om komponenten

Avhengigheter

pkt-icon

Dropdown:

pkt-alert
pkt-button

Varianter

CSS-klasser

Block:

.pkt-inputwrapper

Elements:

.pkt-inputwrapper__label
.pkt-inputwrapper__helptext
.pkt-inputwrapper__helptext-expandable
.pkt-inputwrapper__helptext-expandable-heading
.pkt-inputwrapper__helptext-expandable-open
.pkt-inputwrapper__helptext-expandable-closed

Modifiers:

.pkt-inputwrapper--disabled
.pkt-inputwrapper--error
.pkt-inputwrapper--inline

Props, slots og events

Props	Type	Validation	Default	Beskrivelse
id	string	Required	-	ID for inputfeltet
label	string	Required	-	Etiketten for inputfeltet
ariaDescribedby	string	-	-	aria for elementet som beskriver inputfeltet
ariaLabelledby	string	-	-	aria for elementet som beskriver inputfeltet
autocomplete	string	-	‘off’	Angir om autocomplete skal være aktivert for inputfeltet
className	string	-	-	Tilpasset CSS-klasse for inputfeltet
disabled	boolean	-	false	Angir om inputfeltet er deaktivert
errorMessage	string, ReactNode, ReactNode[]	-	-	Feilmelding som vises når det er en feil i inputfeltet
hasError	boolean	-	false	Angir om inputfeltet har en feil
helptext	string, ReactNode, ReactNode[]	-	-	Hjelpetekst som vises over inputfeltet
helptextDropdown	string, ReactNode, ReactNode[]	-	-	Hjelpetekst som er skjult bak “Les mer”-knapp
helptextDropdownButton	string	-	-	Alternativ tekst til “Les mer”-knapp
iconNameRight	string	-	-	Navn på ikonet som vises til høyre for inputfeltet
inline	boolean	-	false	Angir om inputfelt skal vises i en linje
fullwidth	boolean	-	false	Sett input-elementet til å ha full bredde
name	string	-	id	Navnet for inputfeltet
placeholder	string	-	-	Plassholder-tekst for inputfeltet
prefix	string	-	-	Tekst som vises før inputfeltet
optionalTag	boolean	-	false	Angir om inputfeltet skal ha et valgfritt-merke
optionalText	string	-	‘Valgfritt’	Overstyre tekst for `optional`-merke
requiredTag	boolean	-	false	Angir om inputfeltet er påkrevd
requiredText	string	-	‘Må fylles ut’	Overstyre tekst for `required`-merke
suffix	string	-	-	Tekst som vises etter inputfeltet
type	string	-	‘text’	Angir typen for inputfeltet
useWrapper	boolean	-	true	Angir om feltet skal ha label og hjelpetekst eller om det skal stå alene
omitSearchIcon	boolean	-	false	Sett til `true` dersom du bruker `type="search"` men ikke ønsker søkeikon
value	string	-	-	Verdien for inputfeltet

Slots	Type	Validation	Default	Beskrivelse
	-	-	-

Events	Type	Validation	Default	Beskrivelse
input	Vue			Utløses når verdien i inputfeltet endres. Sender den nye verdien som parameter til eventet.

React Merk: Denne komponenten er videresendt med forwardRef, så den støtter også å motta en ref som en ekstra prop. Denne ref-propen kan brukes til å referere til selve inputfeltet og få tilgang til dets egenskaper og metoder.