`textfield`

This component represents a single-line text field.

Configuration

For general configuration options, see General Component Configuration.

Specific Configuration

type ("textfield"): Component type.
value (Binding | string): Field value.

General Configuration

In addition to the configurations that apply to all fields, the following configurations can optionally be set: //boxLabel settings, disabled, errorTarget, icon, label, label settings, onChange, readOnly, required.

Custom Styling

The visual design of the text fields is primarily controlled via global variables. CSS can be used specifically for certain customizations.

Using the cls , you can apply your own CSS rules. The component provides the following standard selectors for this purpose:

.textfield: Styles for the text field’s container.
.textfield-label / .textfield .label: Direct access to the text field’s Label.
.textfield .value: Access to the text field’s input element.

Example

textfield.json

{
  "$schema": "https://forms.virtimo.net/5.0.x/schema.json",
  "metaData": {
    "id": 0,
    "version": 0
  },
  "configuration": {
    "styles": {
      "css": ".textfield.default .value { color: #e18a50}"
    }
  },
  "components": [
    {
      "type": "container",
      "label": "Textfield Component Example",
      "components": [
        {
          "type": "textfield",
          "label": "My Textfield",
          "value": "Hello World"
        },
        {
          "type": "textfield",
          "value": "${/data/text}",
          "cls": "${/data/text == 'Some Text' && 'default'}"
        }
      ]
    }
  ],
  "state": {
    "data": {
      "text": "Some Text"
    }
  }
}

Embedded preview

Open preview in a separate window

Keywords: