Komponent

FTextareaField

Status

Produktionsklar

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. Informationen om antal tecken kvar uppdateras med aria-live="polite" så att skärmläsare kan läsa upp ändringen.

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

Inmatningsfältets höjd påverkar användarens uppfattning om hur mycket text hen förväntas skriva.

Du kan styra höjden på tre sätt:

• Fast höjd: fältet visar ett bestämt antal rader.
• Justerbar höjd: användaren kan själv ändra fältets höjd.
• Automatisk höjd: fältet anpassar antalet synliga rader efter innehållet.

Fast höjd är standard. Anpassa antalet rader utifrån fältets bredd och hur mycket text 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.

Du anger antalet rader med attributet rows. Fyra rader visas som standard om du inte anger något annat.

 <f-textarea-field
+    rows="3"
 >

Använd resizable om användaren själv ska kunna ändra fältets höjd. Funktionen bygger på webbläsarens eget stöd och fungerar olika i olika webbläsare. På mobila enheter visas oftast inget reglage för att ändra höjden.

 <f-textarea-field
+    resizable
 >

Automatisk höjd

Använd automatisk höjd när mängden text kan variera och fältet ska anpassa sig efter innehållet medan användaren skriver. Fältet börjar med det antal rader du anger och visar fler rader när innehållet behöver mer plats.

När du använder automatisk höjd bör du begränsa fältet så att det inte kan växa utan kontroll. Ange max antal rader med max-rows för att begränsa fältets höjd. Använd maxlength när du också behöver begränsa mängden text.

Du aktiverar automatisk höjd med attributet auto-resize.

 <f-textarea-field
+    auto-resize
 >

Automatisk höjd bygger på webbläsarstöd för field-sizing. I webbläsare utan stöd växer fältet inte automatiskt när användaren skriver. Då visar komponenten minst fyra rader, så att fältet inte blir för litet. Om du anger fler än fyra rader visar komponenten det antalet rader i stället. Om du anger max antal rader kan det begränsa hur stort fältet visas i äldre webbläsare. På desktop kan användaren ändra höjden manuellt när max antal rader inte används. På mobila enheter kan fältet i stället upplevas som fast.

Med auto-resize visas fyra rader som standard, precis som vid fast höjd. Använd rows för att ange ett annat minsta antal rader.

 <f-textarea-field
+    auto-resize
+    rows="3"
 >

Använd max-rows för att ange max antal rader som fältet får visa. När texten inte ryms inom max antal rader kan användaren skrolla i fältet. Attributet rows anger alltid minsta antal rader. Om max-rows är lägre än rows visar komponenten ändå antalet rader från rows.

 <f-textarea-field
+    auto-resize
+    :max-rows="6"
 >

Kombinera inte auto-resize och resizable. Om du ändå anger båda använder komponenten automatisk höjd.

API

Models

v-model: string Optional

The value for the input. If the prop is not set undefined will be used.

Default: undefined

Props

id: string Optional

The id for the input id attribute. The id for the label for attribute. If the prop is not set a random value will be generated.

Default: () => ElementIdService.generateElementId()

softLimit: number Optional

The number of characters for when the "characters left" warning should be shown. A value of 100 means that when 100 or less characters is left the warning is shown. If softLimit is used, then maxlength is required. If the prop is not set undefined will be used, which means that no warning will be shown.

Default: undefined

maxlength: number Optional

The maximum amount of characters permitted in the textarea. If the prop is not set undefined will be used, which means unlimited.

Default: undefined

charactersLeftWarning: string Optional

The string that should be shown in the "characters left" warning. Must contain the word %charactersLeft% which is used to interpolate the number of characters left into the warning string. If the prop is not set "Antal tecken kvar: %charactersLeft%" will be used.

Default: "Antal tecken kvar: %charactersLeft%"

disabled: boolean Optional

Specifies that the component should be disabled, i.e. unusable.

resizable: boolean Optional

Enabling vertical resizing of the textarea

autoResize: boolean Optional

Automatically adjust the textarea height to fit its content.

maxRows: number Optional

Maximum number of visible rows when autoResize is enabled. When the content exceeds this height the textarea will scroll.

Default: undefined

Events

input

‐

Arguments:

• <anonymous>: string

Slots

default

Slot for label content.

tooltip

Slot for tooltip.

description

Optional slot for description. See FLabel for details.

Bindings:

• description-class: string[] — CSS classes for primary description content.
• format-description-class: string[] — CSS classes for format description.

error-message

Slot for displaying single or several error messages.

Bindings:

• hasError: boolean — Set to true when a validation error is present
• validationMessage: string — Descriptive validation error message for current error