Komponent

FTextField

Status

Produktionsklar

Använd inmatningsfält för information som användaren behöver skriva in själv, exempelvis namn, mejladress eller arbetsgivare.

Ett inmatningsfält har alltid en etikett som beskriver vad användaren ska fylla i. Etiketten kan också visa ett felmeddelande, en formatbeskrivning och en hjälptext.

Ett inmatningsfält kan användas för inmatning som inte kräver något särskilt format, till exempel ett personnamn, och för inmatning enligt specifika format som mejladresser och personnummer. Använd något av de specialiserade inmatningsfälten eller skapa ett eget inmatningsfält med utvalda validatorer och regler.

Tänk på följande om du ska använda ett inmatningsfält utan något särskilt krav på formatet, till exempel ett fält för ett personnamn:

• Ange en maxgräns för antal tecken, se längdvalidering.
• Du behöver troligtvis hindra att användaren matar in otillåtna tecken genom att använda validatorn för otillåtna tecken.

Använd inte inaktiva komponenter, bland annat då de är svåra att uppfatta för användare med skärmläsare.

Validering

Ett inmatningsfält kan visas med två statusar: neutral och fel. Innehållet i ett inmatningsfält valideras när användaren lämnar fältet. Information om felaktig inmatning visas med etikettens feltext. Ett inmatningsfält kan ha en eller flera validatorer.

Läs mer om validering

Formatering och parsning

Formatering används för att göra det lättare för användaren att läsa texten i ett inmatningsfält. Parsning används för att ändra på det som faktiskt hanteras och skickas in. Till exempel kan formatering lägga till ett mellanslag som tusenavdelare i ett inmatat belopp medan parsning ser till att beloppet hanteras som ett tal och inte som text med ett mellanslag. Både formatering och parsning görs när användaren lämnar inmatningsfältet och efter att innehållet är validerat och godkänt.

Läs mer om formatering och parsning

Typer av inmatningsfält

Utöver ett generellt inmatningsfält för text finns det flera färdigbyggda specialiserade inmatningsfält. Det är till exempel mejladress och personnummer. Ett sådant inmatningsfält har redan alla nödvändiga validatorer, ett tak för antal tecken, input mode för att rätt tangentbord ska visas på en mobil samt regler för formatering och parsning.

Om användaren ska ange ett datum där det måste finnas en möjlighet att välja en dag i en kalender ska du använda komponenten datumväljare.

Läs mer om specialiserade inmatningsfält

Inline

Etiketten och inmatningsfältet ska bara placeras på samma rad (inline) om fältet inte har någon validering och om det inte behövs någon hjälptext, formatbeskrivning eller felmeddelande. Inline passar till exempel bra för sök och fritextfilter.

Responsiva bredder

Etiketten och inmatningsfältet kan ha olika bredd. När etikettens text radbryts behöver alltså inte vara kopplat till hur brett inmatningsfältet i sig är.

Bredden för respektive del anges med antal kolumner vid olika skärmbredder (brytpunkter).

<template>
    <f-text-field
        v-model="foo"
        v-validation.required.maxLength="{ maxLength: { length: 100 } }"
        label-width="md-9"
        input-width="md-6"
    >
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis scelerisque lacus sed mi
        mollis pulvinar.
    </f-text-field>
</template>

<script>
import { defineComponent } from "vue";
import { FTextField } from "@fkui/vue";

export default defineComponent({
    name: "FTextFieldGrid",
    components: { FTextField },
    data() {
        return { foo: "" };
    },
});
</script>

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

inline: boolean Optional

Show the component inline.

Default: false

v-model: string|number Optional

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

Default: ""

type: string Optional

The type used for the input. If the prop is not set text will be used.

Default: "text"

formatter: FormatFunction<any> Optional

• The formatter function must only be used on a component that uses validation.
• The formatter function acts differently depending on if the parser function is defined or not.

formatter without parser	formatter with parser
modelvalue = parsed viewvalue using formatter function	modelvalue = parsed viewvalue using parser function
viewvalue = modelvalue (where modelvalue is already parsed)	viewvalue = formatted modelvalue using formatter function (where modelvalue is already parsed)

Default: undefined

parser: ParseFunction<any> Optional

• The parser function must only be used on a component that uses validation.
• The parser function acts differently depending on if the formatter function is defined or not.
  • For parser combined with formatter, refer to formatter prop doc.

parser without formatter
modelvalue = parsed viewvalue using parser function
viewvalue = never updated except when modelvalue differs from parsed viewvalue

Default: undefined

labelWidth: string Optional

Set responsive width for label section.

label-width="md-9 lg-6"

Default: "sm-12"

inputWidth: string Optional

Set responsive width for input section that wraps input element and icons.

input-width="md-6 lg-3"

Default: "sm-12"

options: string[] | undefined Optional

List of options.

When set, the user can select a value from the list of options and filter while typing.

If options will be set at a later time, initially specify as an empty array.

If a formatter is used by the component, make sure the options are formatted as well.

Default: () => undefined

disabled: boolean Optional

Set to true, empty string "" or string "disabled" to disable this field.

Default: false

Events

blur

‐

Arguments:

• <anonymous>: string

change

‐

Arguments:

• <anonymous>: string

update:modelValue

‐

Arguments:

• <anonymous>: undefined

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

input-left

Slot for adding content to the left of the input element.

append-inner

Slot for add content inside the input to the right

input-right

Slot for adding content to the right of the input element.

Relaterat

Etikett

Formatering och parsning

Specialiserade inmatningsfält

Validering och felhantering