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>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
Bruk required for å vise et stjernesymbol på slutten av ledeteksten som markerer at feltet er påkrevd.
Bruk i tillegg requiredLabel for å vise en forklarende tekst sammen med stjernen (for eksempel 'obligatorisk'). Dette gir brukerne en bedre forståelse av at feltet er påkrevd, siden ikke alle brukere forstår eller oppfatter stjernesymbolet alene.
<nve-textarea label="Beskriv saken" required requiredLabel="Obligatorisk"> </nve-textarea>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>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>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" 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).
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.
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å | ||
| 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 | ||
| 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 |
| 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 |