Komponent

FTextField

Status

Produktionsklar

Innehåll

• Exempel
• Dynamiska alternativ
• Använd
• Använd inte
• API

Använd en kombobox när användaren behöver välja från ett stort antal alternativ, eller i de fall då användaren både ska kunna välja från förbestämda förslag eller skriva en egen text.

Komboboxen kombinerar ett textfält med en lista med förbestämda alternativ. Listan filtreras för att matcha inmatningen i textfältet. Den kan antingen sättas att tillåta fritext eller kräva att användaren väljer ett alternativ från listan.

Exempel

Dynamiska alternativ

Om det exempelvis är alternativ som ska hämtas från en server, börja med att initialisera options till en tom lista.

Använd

• Istället för en dropplista när det finns ett stort antal alternativ att välja mellan.
• När användaren både ska kunna skriva en godtycklig fritext eller välja bland förbestämda förslag i listan.

Använd inte

• Vid färre alternativ, använd en dropplista eller radioknappar.

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.