Flerradigt inmatningsfält
- Komponent
-
FTextareaField - Status
-
Produktionsklar
Innehåll
Använd flerradigt inmatningsfält för information som användaren behöver skriva in själv, men som inte får plats i ett vanligt inmatningsfält. Flerradigt inmatningsfält har alltid en etikett som beskriver vad användaren ska fylla i.
Begränsa antal tecken
Etikettens formatbeskrivning ska visa antalet tecken som användaren kan skriva i ett flerradigt inmatningsfält.
När antalet tecken begränsas ska det även sättas en gräns för när användaren ska få information om att max antal tecken snart är uppnått. Informationen visas genom att texten "Antal tecken kvar: nn" visas som en del av etiketten. Förslagsvis visas varningen när 80% av max antal tecken är uppnått. Skärmläsaranvändare får information om antal återstående uppläst för sig ('aria-live="polite"').
När max antal tecken är uppnått går det inte att skriva in mer text.
Använd attributen maxlength som är den hårda gränsen och soft-limit som är tröskelvärdet för när varningen ska visas.
<f-textarea-field
+ :maxlength="100"
+ :soft-limit="20"
>
Du kan använda attributet characters-left-warning för att använda en annan text i varningen.
För att interpolera in antalet tecken kvar i texten behöver strängen innehålla teckenföljden %charactersLeft% som kommer att ersättas med värdet.
<f-textarea-field
+ characters-left-warning="Endast %charactersLeft% tecken kvar."
>
Fältets höjd
Tänk på att inmatningsfältets höjd, som anges i antal rader, påverkar användarens uppfattning om hur mycket text hen förväntas skriva.
Anpassa antalet rader som visas i inmatningsfältet utifrån bredden på fältet och antal tecken som användaren kan tänkas skriva. Det är sällan lämpligt att sätta antalet rader utifrån maximalt antal tillåtna tecken. Om inmatningsfältet visar många rader får användaren dålig överblick om inmatningsfältet är placerat i ett formulär eller tillsammans med annat innehåll.
Antalet rader sätts med attributet rows.
<f-textarea-field
+ rows="3"
>
Fyra rader visas som standard om inget anges.
API
| Name | Description | Type | Required | Default |
|---|---|---|---|---|
id | The id for the input id attribute. | string | false | () => ElementIdService.generateElementId() |
v-model | The value for the input. | string | false | undefined |
softLimit | The number of characters for when the "characters left" warning should be shown. | number | false | undefined |
maxlength | The maximum amount of characters permitted in the textarea. | number | false | undefined |
charactersLeftWarning | The string that should be shown in the "characters left" warning. | string | false | "Antal tecken kvar: %charactersLeft%" |
disabled | Specifies that the component should be disabled, i.e. unusable. | boolean | false | false |
resizable | Enabling vertical resizing of the textarea | boolean | false | false |
| Name | Description | Properties |
|---|---|---|
input | Vue2 v-model event. | <anonymous>: string |
update:modelValue | V-model event. | <anonymous>: string |
| Name | Description | Bindings |
|---|---|---|
default | Slot for label content. | ‐ |
tooltip | Slot for tooltip. | ‐ |
description | Optional slot for description. See FLabel for details. | descriptionClass |
error-message | Slot for displaying single or several error messages. | hasError |