Om komponenten
Avhengigheter
- pkt-icon
Dropdown:
- pkt-alert
- pkt-button
Varianter
Input
<div class="pkt-textinput">
<label class="pkt-inputwrapper__label" for="exampleInputText1"
>Textinput
<input
class="pkt-textinput__input"
type="text"
id="exampleInputText1"
placeholder="Plassholder"
/>
</label>
</div><pkt-textinput
id="exampleInputText1"
label="Textinput"
placeholder="Plassholder"
/><PktTextinput
id="exampleInputText1"
label="Textinput"
placeholder="Plassholder"
/>Input med dropdown helptext
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.
<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>
<button class="pkt-btn pkt-btn--tertiary pkt-btn--small pkt-btn--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"
>
<div class="pkt-alert">
<span class="pkt-icon pkt-alert__icon">
<svg viewBox="0 0 32 32" aria-hidden="true">
<use href="#alert-information"></use>
</svg>
</span>
<div class="pkt-alert__text">
Bruk dette tekstfeltet til Ă„ skrive mer informasjon om inputfeltet.
</div>
</div>
</div>
<label class="pkt-sr-only" for="exampleInputText2"
>Visuelt skjult label</label
>
<input
class="pkt-textinput__input"
type="text"
id="exampleInputText2"
placeholder="Plassholder"
/>
</div><pkt-textinput
id="exampleInputText2"
label="Tekstinput med dropdown"
helptext="Bruk dette tekstfeltet til Ă„ skrive en kort varsling."
iconNameRight="user"
helptextDropdown="Dette er en utvidet hjelpetekst"
required
></pkt-textinput><PktTextinput
id="exampleInputText2"
label="Tekstinput med dropdown"
helptext="Bruk dette tekstfeltet til Ă„ skrive en kort varsling."
iconNameRight="user"
helptextDropdown="Dette er en utvidet hjelpetekst"
required
/>Input med error
Bruk dette tekstfeltet til Ă„ skrive en kort varsling.
Suffix
Dette er en feilmelding
<div class="pkt-inputwrapper mb-size-24 pkt-inputwrapper--error">
<label class="pkt-inputwrapper__label" for="exampleInputText3"
>Textinput med suffix og ikon
<div class="pkt-inputwrapper__helptext">
Dette er tekst over tekstfeltet.
</div>
<div class="pkt-textinput__input-suffix-wrapper">
<input
class="pkt-textinput__input"
type="text"
id="exampleInputText3"
placeholder="Plassholder"
/>
<p class="pkt-textinput__input-suffix">
Suffix
<span class="pkt-icon pkt-input__input-suffix-icon">
<svg viewBox="0 0 32 32">
<use href="#close"></use></svg
></span>
</p>
</div>
</label>
<div class="pkt-alert pkt-alert--error" aria-live="assertive">
<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><pkt-textinput
id="exampleInputText3"
label="Tekstinput med error"
helptext="Bruk dette tekstfeltet til Ă„ skrive en kort varsling."
iconNameRight="user"
suffix="Suffix"
errorMessage="Dette er en feilmelding"
hasError
></pkt-textinput><PktTextinput
id="exampleInputText3"
label="Tekstinput med error"
helptext="Bruk dette tekstfeltet til Ă„ skrive en kort varsling."
iconNameRight="user"
suffix="Suffix"
errorMessage="Dette er en feilmelding"
hasError
/>Block:
- .pkt-textinput
Elements:
- .pkt-inputwrapper__label
- .pkt-inputwrapper__helptext
- .pkt-textinput__input
- .pkt-textinput__input-prefix-wrapper
- .pkt-textinput__input-prefix
- .pkt-textinput__input-suffix-wrapper
- .pkt-textinput__input-suffix
- .pkt-textinput__input-icon
- .pkt-inputwrapper__helptext-expandable
- .pkt-inputwrapper__helptext-expandable-heading
- .pkt-inputwrapper__helptext-expandable-open
- .pkt-inputwrapper__helptext-expandable-closed
Modifiers:
- .pkt-textinput
--disabled - .pkt-textinput
--error - .pkt-textinput
--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 | - | - | Feilmelding som vises nÄr det er en feil i inputfeltet |
| hasError | boolean | - | false | Angir om inputfeltet har en feil |
| helptext | string | - | - | Hjelpetekst som vises over inputfeltet |
| helptextDropdown | string | - | - | 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 |
| name | string | - | id | Navnet for inputfeltet |
| optional | boolean | - | false | Angir om inputfeltet skal ha et valgfritt-merke |
| placeholder | string | - | - | Plassholder-tekst for inputfeltet |
| prefix | string | - | - | Tekst som vises fĂžr inputfeltet |
| required | boolean | - | false | Angir om inputfeltet er pÄkrevd |
| 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 |
| 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.