nve-textarea
Arvet fra LitElement
Feil / oppgaver / PR
Ingen som vi vet om. Hvis du finner noe muffens, registrer en feil under Issues i Github og merk den med nve-textarea.
<nve-textarea label="Beskriv saken"></nve-textarea>nve-textarea bygger på et native <textarea>-element og støtter derfor de fleste vanlige textarea-attributter:
- autocapitalize
- autocomplete
- autocorrect
- autofocus - husk at kun ett element kan autofokuseres
- maxLength - selv om vi ikke støtter constraint validation, den brukes til å begrense antall tegn en bruker kan skrive.
- placeholder
- rows - lenke til hvordan den brukes
- spellcheck
Komponenten videresender relevante hendelser fra det native <textarea>-elementet slik at de kan fanges utenfor komponentens Shadow DOM:
- change- når verdien endres og feltet mister fokus
- select- når brukeren markerer tekst
selectionchange støttes ikke foreløpig siden den ikke er fullstøttet i mange nettlesere.
Noen native attributter er bevisst ikke støttet:
- cols – komponenten bruker CSS for bredde. Den er alltid 100% basert på foreldren sin bredde.
- dirname – ikke støttet.
- form, name og wrap – komponenten er ikke laget for native form submission.
- minlength – ikke støttet (vi tilbyr ikke denne typen innebygd constraint-/formvalidering).
Retningslinjer
- Gi alltid feltet en tydelig label. Ikke stol på placeholder alene.
- Bruk disabled med omhu. Deaktiverte felt kan ikke fokuseres og kan derfor være vanskeligere å oppdage med tastatur/skjermleser. Hvis innholdet skal kunne leses, vurder readonly i stedet.
- Sett en fornuftig høyde med rows (for eksempel 3–5 rader) når du forventer lengre svar. For korte svar bør du vurdere nve-input i stedet.
- Hvis du bruker maxlength, informer gjerne brukeren om grensen (for eksempel i hint) slik at det ikke oppleves som “feltet slutter å virke”.
Eksempler
Ledetekst
Bruk label for å vise en tydelig ledetekst for feltet. Attributtet er påkrevd – hvert skjemafelt skal ha en ledetekst som skjermlesere kan bruke for å forstå hva feltet gjelder.
<nve-textarea label="Beskriv saken"> </nve-textarea>Skjult ledetekst
Vi anbefaler å alltid vise ledeteksten. Hvis den i enkelte tilfeller må skjules av hensyn til utformingen, kan du bruke CSS til å skjule den visuelt. Ledeteksten er fortsatt tilgjengelig i DOM-en og kan leses av skjermlesere.
Bruk ::part(label) for å skjule ledeteksten.
Det kan også være nødvendig å sette margin-top: 0 på ::part(textarea) for å fjerne avstanden over feltet.
<nve-textarea class="hideLabel" label="Beskriv saken"> </nve-textarea>
<style>
.hideLabel::part(label) {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.hideLabel::part(textarea) {
margin-top: 0;
}
</style>Toggletip
Bruk sporet label-toggletip for å vise en toggletip ved siden av ledeteksten. Sporet er beregnet for en nve-toggletip-komponent.
Husk å legge til aria-label på nve-toggletip.
<nve-textarea label="Beskriv saken">
<nve-toggletip slot="label-toggletip" aria-label="Les mer info om hvordan saken kan beskrives.">
<span>Ekstra info her.</span>
</nve-toggletip>
</nve-textarea>Påkrevd og Valgfritt
Det er ikke nødvendig å merke feltene som obligatoriske dersom flertallet av feltene er påkrevd. Brukeren må imidlertid informeres om dette før vedkommende begynner å fylle ut skjemaet. Dersom enkelte felt er valgfrie, skal disse merkes tydelig som valgfrie. Tilsvarende gjelder dersom flertallet av feltene er valgfrie – da skal de obligatoriske feltene merkes særskilt.
Bruk required for å sette feltet til obligatorisk, og bruk hideRequiredTag for å skjule merket «Må fylles ut» uten å endre at feltet er obligatorisk.
Bruk optional for å vise merket «Valgfritt».
<nve-textarea label="Beskriv saken" required></nve-textarea>
<nve-textarea label="Utfyllende informasjon" optional></nve-textarea>Ved annet språk, kan attributtene requiredLabel og optionalLabel tas i bruk. De erstatter teksten i henholdsvis required-merket og optional-merket, uten å legge til et nytt merke. Brukes sammen med required og optional attributtene. Standardtekstene er «Må fylles ut» og «Valgfritt» og skal ikke endres etter retningslinjene.
Mørk bakgrunn
Bruk filled for mørk bakgrunnsfarge
<nve-textarea label="Beskriv saken" filled> </nve-textarea>Hjelpetekst
Bruk helpText for å vise en tekst som nærmere bestemmer hva som skal fylles inn i inndatafeltet, og brukes som et tillegg til ledeteksten for inndatafeltet. Hjelpeteksten legges over inndatafeltet.
<nve-textarea label="Beskriv saken" helpText="En tekst som presiserer hva som skal fylles inn"> </nve-textarea>Hvis hjelpeteksten skal inneholde mer enn vanlig tekst, for eksempel en lenke, kan du bruke helpText-sporet.
Du kan ikke bruke helpText-attributtet og helpText-sporet samtidig. Hvis begge er angitt, prioriteres attributtet.
Se tilgjengelighet for informasjon om hvordan hjelpeteksten med en lenke bør struktureres.
<nve-textarea label="Beskriv saken">
<p slot="helpText">Se <a href="#">hva som bør være med i beskrivelsen</a></p>
</nve-textarea>Hint
Bruk hint for å vise en kortfattet tekst, som kan brukes for å gi eksempler på inndata. Hintet legges under inndatafeltet.
<nve-textarea label="Fugler i Norge" hint="Hint: Dompap, tiur, fossekall"> </nve-textarea>Hvis hintteksten skal inneholde mer enn vanlig tekst, for eksempel en lenke, kan du bruke hintText-sporet.
Du kan ikke bruke hint-attributtet og hintText-sporet samtidig. Hvis begge er angitt, prioriteres attributtet.
Se tilgjengelighet for informasjon om hvordan hint med en lenke bør struktureres.
<nve-textarea label="Fugler i Norge">
<p slot="hintText">Les om <a href="#">fuglearter som finnes i Norge</a></p>
</nve-textarea>Deaktivert
Et deaktivert felt (disabled) kan ikke få fokus og blir derfor ofte ikke oppdaget av brukere som navigerer med tastatur eller skjermleser. Bruk disabled med omhu, og vurder å gi en tydelig forklaring i tekst på hvorfor feltet er deaktivert.
Bruk attributtet disabled for å hindre at brukeren kan endre innholdet.
<nve-textarea label="Beskriv saken" disabled> </nve-textarea>Skrivebeskyttet
Bruk readonly for å stenge mulighet for å endre innholdet
<nve-textarea label="Beskriv saken" readonly value="Dette får du ikke endret"></nve-textarea>Antall rader
Bruk rows for å velge høyde. Standard er to rader
<nve-textarea label="Beskriv saken" rows="5" value="5 rader"></nve-textarea>
<nve-textarea label="Beskriv saken" value="2 rader"></nve-textarea>Endring av størrelse
Om man ikke ønsker at bruker kan endre størrelsen på textarea kan man legge på resize: none i css på textarea-delen:
<nve-textarea class="textarea-1" label="Beskriv saken"></nve-textarea>
<style>
.textarea-1::part(textarea) {
resize: none;
}
</style>Maksimal bredde
Hvis du vil gjøre textarea smalere enn 100%, kan du bruke --textarea-max-width css-property til det.
<nve-textarea label="Beskriv saken" style="--textarea-max-width:100px;"></nve-textarea>Validering
For mer informasjon om hvordan nve-textarea og andre skjemakomponenter valideres, se siden om validering.
Intern validering
Intern validering gjør det mulig å validere verdien i nve-textarea ved hjelp av valideringsregler. Du kan for eksempel kontrollere om feltet er tomt, for kort eller ikke følger et ønsket format.
Valideringsreglene kjøres når du kaller validateForm() i skjemaets submit-handler.
Du kan importere metoden slik:
import { validateForm } from 'nve-designsystem/validation/validateForm.js';<form id="test-form" class="form">
<nve-textarea id="txt" required label="Beskriv saken"></nve-textarea>
<nve-button type="submit">Send inn</nve-button>
</form>
<script type="module">
const form = document.querySelector('#test-form');
const txt = document.querySelector('#txt');
txt.validationRules = [
(value) => rules.required(value) || 'Felt er påkrevd',
(value) => value.length >= 3 || 'Minimum 3 bokstaver',
(value) => value.length <= 20 || 'Maximum 20 bokstaver',
(value) => value.startsWith('s') || 'Må starte med s',
];
form?.addEventListener('submit', (event) => {
event.preventDefault();
const isValid = validateForm(event);
});
</script>Ekstern validering
Bruker du et eksternt valideringssystem, kan du sette komponenten i feiltilstand ved hjelp av errorMessage.
<form>
<nve-textarea label="Beskriv saken" errorMessage="Feltet er påkrevd"></nve-textarea>
</form>Du kan fjerne feiltilstanden ved å sette errorMessage til en tom streng.
<form>
<nve-textarea label="Beskriv saken" errorMessage=""></nve-textarea>
</form>Tilgjengelighet
nve-textarea er bygget på et native <textarea> og bruker en tilknyttet ledetekst. Når feltet får fokus vil skjermlesere lese opp ledeteksten, slik at brukeren forstår hva som skal fylles inn.
I tillegg brukes aria-describedby for å knytte supplerende tekst til feltet. Når helpText, hint eller errorMessage er satt vil skjermlesere normalt lese dem opp i forbindelse med fokus på feltet (ved bruk av aria-describedby).
Hvis hjelpeteksten eller hintet inneholder en lenke, bør lenketeksten beskrive hva brukeren finner når lenken åpnes. Unngå generelle tekster som "Les mer". Skriv for eksempel "Les om hvilke opplysninger du trenger for å fylle ut beskrivelsen". Da gir lenken mening også når den leses opp sammen med feltets ledetekst, eller navigeres til separat med skjermleser.
Ikoner i nve-textarea er dekorative og ikke ment som eneste informasjonsbærer. Skjermlesere informerer brukere når tekstfeltet er skrivebeskyttet, men ikke når det er deaktivert.
Spor
| Navn | Beskrivelse |
|---|---|
| helpText | - viser hjelpetekst over inputfeltet |
| hintText | - viser hint-tekst under inputfeltet |
Hendelser
| Navn | Arvet fra | Beskrivelse |
|---|---|---|
| change | - når verdien i textarea endres og elementet mister fokus | |
| select | - når brukeren markerer tekst i textarea |
Egenskaper
| Navn | Type | Arvet fra | Beskrivelse | Reflected |
|---|---|---|---|---|
| testId | string | undefined = undefined | |||
| autocomplete | string | Om autocomplete skal være aktivert | ||
| disabled | = false | Om inputfeltet skal være deaktivert | ||
| maxLength | number | Maksimalt antall tegn som kan skrives inn | ||
| placeholder | string | Placeholder-tekst som vises når feltet er tomt | ||
| readonly | = false | Om textareafeltet skal være skrivebeskyttet | ||
| required | = false | Om minst en sjekkboks er sjekket på | ||
| optional | = false | Om textareafeltet er valgfritt | ||
| rows | number | Antall synlige tekstlinjer i textarea | ||
| value | string = '' | Verdien i textarea | ||
| filled | boolean = false | Om textareafeltet skal ha en mørk bakgrunn | ||
| helpText | string | Hjelpetekst som vises over feltet | ||
| hint | string | Hint-tekst som vises under feltet | ||
| label | string | Ledetekst | ||
| errorMessage | = '' | Feilmelding som vises ved valideringsfeil. Hvis den er satt blir input-felt ugyldig og feil melding vises. | ||
| requiredLabel | = '' | Tekst som vises for å markere at et felt er obligatorisk | ||
| optionalLabel | = '' | |||
| hideRequiredTag | = false | |||
| tooltip | = '' | Tooltip-tekst for label | ||
| validationRules | Array<ValidationRule> = [] |
Metoder
| Navn | Parametre | Returtype | Arvet fra | Beskrivelse |
|---|---|---|---|---|
| focus | options: FocusOptions | Fokuserer textarea-elementet. Kan ta imot valgfri FocusOptions for å spesifisere fokusatferd. | ||
| select | Velger all tekst i textarea-feltet | |||
| setSelectionRange | selectionStart: number selectionEnd: number selectionDirection: 'forward' | 'backward' | 'none' | Setter utvalg i textarea-feltet | ||
| setRangeText | replacement: string start: number end: number selectMode: 'select' | 'start' | 'end' | 'preserve' | Erstatter tekst i textarea-feltet | ||
| validate |
Deler
| Navn | Beskrivelse |
|---|---|
| field | - wrapper rundt hele textarea-komponenten |
| label | - label elementet som viser ledeteksten for textarea |
| help-text | - hjelpetekst som vises over textarea |
| textarea | - wrapper rundt textarea-elementet og eventuelle ikoner |
| textarea__control | - selve textarea-elementet |
| hint-text | - hint-tekst som vises under textarea, eller feilmelding hvis det er en valideringsfeil |
| error-text | - feilmelding som vises under textarea, hvis det er en valideringsfeil |