Textarea

Om komponenten

Avhengigheter

pkt-icon

Ekspanderende hjelpetekst:

pkt-alert
pkt-button

Varianter

<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

<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

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