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

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()

v-model: string Optional

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

Default: undefined

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.

Default: false

resizable: boolean Optional

Enabling vertical resizing of the textarea

Default: false

Events

input

‐

Arguments:

• <anonymous>: string

update:modelValue

V-model event.

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: unknown
• format-description-class: unknown

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