Input Wrapper | Punkt | Origo

Komponentbygger

Her kan du teste ut alle egenskapene til PktTextarea, og få ferdig kode for React og Elements.

Skjemaelement

forId

For ID Må fylles ut

Id-en til skjemaelementet som dette wrapper rundt

label

Merkelapp Må fylles ut

Merkelapp for skjemaelementet

helptext

Hjelpetekst

Hjelpetekst for skjemaelementet

helptextDropdown

Hjelpetekst i dropdown

Hjelpetekst som vises i ekspanderende felt

helptextDropdownButton

Tekst i hjelpetekst-knapp

Tekst som vises i knappen for å vise hjelpetekst i dropdown

ariaDescribedby

aria-describedby

Id-en til elementet som beskriver skjemaelementet

counter

Teller

Teller for antall tegn i skjemaelementet

counter

counterCurrent

Tellerverdi

Tellerens nåværende verdi

counterMaxLength

Maks tegn i teller

Maks antall tegn som kan skrives i skjemaelementet

optionalTag

Vise valgfritt-merking

Viser en merking som indikerer at feltet er valgfritt

optionalTag

optionalText

Valgfritt-tekst

Tekst som vises i valgfritt-merkingen

requiredTag

Vise påkrevd-merking

Viser en merking som indikerer at feltet er påkrevd

requiredTag

requiredText

Påkrevd-tekst

Tekst som vises i påkrevd-merkingen

hasError

Feil

Indikerer at skjemaelementet har en feil

hasError

errorMessage

Feilmelding

Feilmelding som vises i tilknytning til skjemaelementet

disabled

Deaktivert

Indikerer at skjemaelementet er deaktivert

disabled

inline

Inline

Indikerer at skjemaelementet skal flyte sammen med sidens innhold

inline

hasFieldset

Har fieldset

Indikerer at skjemaelementet er en del av et fieldset

hasFieldset

useWrapper

Bruk wrapper

Indikerer om skjemaelementet skal bruke en wrapper

useWrapper

Kopier kode

Egenskaper

Prop	Navn	Beskrivelse	Type	Standardverdi
forId	For ID	Id-en til skjemaelementet som dette wrapper rundt	string
label	Merkelapp	Merkelapp for skjemaelementet	string
helptext	Hjelpetekst	Hjelpetekst for skjemaelementet	string
helptextDropdown	Hjelpetekst i dropdown	Hjelpetekst som vises i ekspanderende felt	string
helptextDropdownButton	Tekst i hjelpetekst-knapp	Tekst som vises i knappen for å vise hjelpetekst i dropdown	string	Les mer <span class='pkt-sr-only'>om feltet</span>
ariaDescribedby	aria-describedby	Id-en til elementet som beskriver skjemaelementet	string
counter	Teller	Teller for antall tegn i skjemaelementet	boolean	false
counterCurrent	Tellerverdi	Tellerens nåværende verdi	number
counterMaxLength	Maks tegn i teller	Maks antall tegn som kan skrives i skjemaelementet	number
optionalTag	Vise valgfritt-merking	Viser en merking som indikerer at feltet er valgfritt	boolean	false
optionalText	Valgfritt-tekst	Tekst som vises i valgfritt-merkingen	string	Valgfritt
requiredTag	Vise påkrevd-merking	Viser en merking som indikerer at feltet er påkrevd	boolean	false
requiredText	Påkrevd-tekst	Tekst som vises i påkrevd-merkingen	string	Må fylles ut
hasError	Feil	Indikerer at skjemaelementet har en feil	boolean	false
errorMessage	Feilmelding	Feilmelding som vises i tilknytning til skjemaelementet	string
disabled	Deaktivert	Indikerer at skjemaelementet er deaktivert	boolean	false
inline	Inline	Indikerer at skjemaelementet skal flyte sammen med sidens innhold	boolean	false
hasFieldset	Har fieldset	Indikerer at skjemaelementet er en del av et fieldset	boolean	false
useWrapper	Bruk wrapper	Indikerer om skjemaelementet skal bruke en wrapper	boolean	true

Hendelser / handlinger

Event	Beskrivelse	Type
toggleHelpText	Event for å vise eller skjule hjelpetekst i dropdown

Hvordan ta i bruk?

// React
import { PktInputWrapper } from "@oslokommune/punkt-react";

// Custom Element:
import "@oslokommune/punkt-elements/dist/pkt-input-wrapper.js";

// Custom Element fra CDN:
<script src="https://punkt-cdn.oslo.kommune.no/latest/elements/pkt-input-wrapper.js"></script>;

Enhetstesting / unit testing

Dersom dere skal skrive enhetstester med JSDOM eller liknende, er det viktig at dere lar komponenten bli rendret ferdig før dere tester den. Dette kan gjøres ved å kjøre denne kodelinjen før testene kjøres:

await window.customElements.whenDefined("pkt-input-wrapper");