Om komponenten
Avhengigheter
- pkt-icon
Ekspanderende hjelpetekst:
- pkt-alert
- pkt-button
Varianter
Textarea
<div class="pkt-textinput pkt-inputwrapper">
<label class="pkt-inputwrapper__label" for="exampleInputText1"
>Textinput
<textarea
class="pkt-input"
type="text"
id="exampleInputText1"
placeholder="Plassholder"
></textarea>
</label>
</div>
<PktTextarea
id="exampleInputText1"
label="Textinput"
placeholder="Plassholder"
/>
<PktTextarea
id="exampleInputText1"
label="Textinput"
placeholder="Plassholder"
/>
Textarea med skjult hjelpetekst og tegnteller
For Ă„ Ă„pne helptext i CSS, bytt ut pkt-inputwrapper__helptext-expandable-closed med pkt-inputwrapper__helptext-expandable-open
Tekstinput med dropdownMĂ„ fylles ut
Bruk dette tekstfeltet til Ă„ skrive en kort varsling.
0/200
<div class="pkt-inputwrapper pkt-inputwrapper__helptext">
<h2 class="pkt-inputwrapper__helptext-expandable-heading">
Textinput med Ă„pen expandable helptext<span
class="pkt-tag pkt-tag--small pkt-tag--thin-text pkt-tag--beige"
>MĂ„ fylles ut</span
>
</h2>
<div class="pkt-inputwrapper__helptext-expandable">
<button class="pkt-link pkt-link--icon-right">
<span class="pkt-icon pkt-btn__icon">
<svg viewBox="0 0 32 32">
<use href="#chevron-thin-down"></use>
</svg>
</span>
<span class="pkt-btn__text"
>Les mer <span class="pkt-sr-only">om inputfeltet</span></span
>
</button>
<div
class="pkt-inputwrapper__helptext pkt-inputwrapper__helptext-expandable-open"
>
Bruk dette tekstfeltet til Ă„ skrive mer informasjon om inputfeltet.
</div>
</div>
<label class="pkt-sr-only" for="exampleInputText2"
>Visuelt skjult label</label
>
<textarea
class="pkt-input"
type="text"
id="exampleInputText2"
placeholder="Plassholder"
>
Dette er en tekst, den er 39 tegn lang.
</textarea>
<div class="pkt-input__counter" aria-live="polite" aria-atomic="true">
39/200
</div>
</div>
<PktTextarea
id="exampleInputText2"
label="Tekstinput med dropdown"
helptext="Bruk dette tekstfeltet til Ă„ skrive en kort varsling."
helptextDropdown="Dette er en utvidet hjelpetekst"
counter
:counterMaxLength="200"
requiredTag
/>
<PktTextarea
id="exampleInputText2"
label="Tekstinput med dropdown"
helptext="Bruk dette tekstfeltet til Ă„ skrive en kort varsling."
helptextDropdown="Dette er en utvidet hjelpetekst"
counter
counterMaxLength={200}
requiredTag
/>
Textarea med error
Dette er en feilmelding
<div
class="pkt-textinput pkt-textarea pkt-inputwrapper pkt-inputwrapper--error"
>
<label for="exampleInputText3" class="pkt-inputwrapper__label"
><h2>Tekstinput med error</h2></label
>
<div class="pkt-inputwrapper__helptext">
Bruk dette tekstfeltet til Ă„ skrive en kort varsling.
</div>
<textarea
class="pkt-input "
name="exampleInputText3"
id="exampleInputText3"
aria-invalid="true"
></textarea>
<div>
<div
aria-live="polite"
class="pkt-alert pkt-alert--error pkt-alert--compact"
>
<span class="pkt-icon pkt-alert__icon">
<svg viewBox="0 0 32 32" aria-hidden="true">
<use href="#alert-error"></use>
</svg>
</span>
<div class="pkt-alert__text">Dette er en feilmelding</div>
</div>
</div>
</div>
<PktTextarea
id="exampleInputText3"
label="Tekstinput med error"
helptext="Bruk dette tekstfeltet til Ă„ skrive en kort varsling."
errorMessage="Dette er en feilmelding"
hasError
/>
<PktTextarea
id="exampleInputText3"
label="Tekstinput med error"
helptext="Bruk dette tekstfeltet til Ă„ skrive en kort varsling."
errorMessage="Dette er en feilmelding"
hasError
/>
Block:
- .pkt-textinput
- .pkt-inputwrapper
Elements:
- .pkt-inputwrapper__label
- .pkt-inputwrapper__helptext
- .pkt-input__container
- .pkt-input
- .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 - .pkt-input
--fullwidth
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 |
| className | string | - | - | Tilpasset CSS-klasse for inputfeltet |
| counter | boolean | - | false | Angir om feltet skal ha en tegnteller |
| counterMaxLength | number | - | - | Angir at feltet skal ha et maks antall tegn |
| 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 |
| inline | boolean | - | false | Angir om inputfelt skal vises i en linje |
| fullwidth | boolean | - | false | Sett textarea-elementet til Ă„ ha full bredde |
| name | string | - | id | Navnet for inputfeltet |
| placeholder | string | - | - | Plassholder-tekst for inputfeltet |
| optionalTag | boolean | - | false | Angir om inputfeltet skal ha et valgfritt-merke |
| optionalText | string | - | âValgfrittâ | Overstyre tekst for optionalTag-merke |
| requiredTag | boolean | - | false | Angir om inputfeltet er pÄkrevd |
| requiredText | string | - | âMĂ„ fylles utâ | Overstyre tekst for requiredTag-merke |
| rows | number | - | - | Overstyrer feltets standardhĂžyde med et Ăžnsket antall linjer |
| useWrapper | boolean | - | true | Angir om feltet skal ha label og hjelpetekst eller om det skal stÄ alene |
| 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.