ftd.text-input is used to create interactive controls for web-based forms in order to accept text type data from the user; a wide variety of types of input data and control widgets are available. There is a special variable $VALUE which can be used to access the current value of ftd.text-input.

Usage

-- string $current-value: Nothing typed yet

-- ftd.text-input:
placeholder: Type any text ...
padding-horizontal.px: 16
padding-vertical.px: 8
width.fixed.px: 200
border-width.px: 1
border-color: $inherited.colors.border
border-radius.px: 4
$on-input$: $ftd.set-string($a = $current-value, v = $VALUE)

-- ftd.text: $current-value
color: coral
padding.px: 10

Lang:

ftd

Output

Nothing typed yet

Attributes

ftd.text-input accepts the below attributes along with the common attributes.

`placeholder: optional string`

The placeholder attribute is a string that provides a brief hint to the user as to what kind of information is expected in the field.

It accepts a string value and is optional.

-- ftd.text-input:
placeholder: Type any text ...

Lang:

ftd

Output

`value: optional string`

The value attribute is a string that contains the current value of the text entered into the text field.

-- ftd.text-input:
value: I love ftd

Lang:

ftd

Output

`default-value: optional string`

The default-value attribute sets or returns the default value of a text field.

The difference between value attribute and defaultValue attribute is the latter retains the original default value specified while the value attribute value changes based on the user input in the input field.

-- ftd.text-input:
default-value: I love ftd

Lang:

ftd

Output

`multiline: bool`

The default value of this attribute is false.

The multiline attribute with false value defines a single-line text field.

The multiline attribute with true value defines a multi-line text input control.

multiline: false

-- ftd.text-input:
multiline: false

Lang:

ftd

Output: multiline: false

multiline: true

-- ftd.text-input:
multiline: true

Lang:

ftd

Output: multiline: true

`enabled: optional boolean`

The enabled attribute, when set false, makes the element not mutable and un-focusable. By default, the value is true

enabled: false

-- ftd.text-input:
enabled: false
value: Hello

Lang:

ftd

Output: enabled: false

enabled: true

-- ftd.text-input:
enabled: true
value: Hello

Lang:

ftd

Output: enabled: true

`max-length: optional integer`

This attribute will define the maximum length of characters that user is allowed to type inside ftd.text-input. It accepts integer value and is optional.

max-length: optional integer

-- ftd.text-input:
placeholder: Max 10 characters
type: text
max-length: 10

Lang:

ftd

Output: max-length is set to 10 characters

`type: optional ftd.text-input-type`

This attribute is used to give input type within ftd.text-input. It accepts the ftd.text-input-type type value and is optional. It has default value as text.

type: text

-- ftd.text-input:
value: Hello
type: text

Lang:

ftd

Output: type: text

type: email

-- ftd.text-input:
value: Hello@abc.com
type: email

Lang:

ftd

Output: type: email

type: password

-- ftd.text-input:
value: Hello
type: password

Lang:

ftd

Output: type: password

type: url

-- ftd.text-input:
value: https://fastn.com
type: url

Lang:

ftd

Output: type: url

type: datetime

-- ftd.text-input:
type: datetime

Lang:

ftd

Output: type: datetime

type: date

-- ftd.text-input:
type: date

Lang:

ftd

Output: type: date

type: time

-- ftd.text-input:
type: time

Lang:

ftd

Output: type: time

type: month

-- ftd.text-input:
type: month

Lang:

ftd

Output: type: month

type: week

-- ftd.text-input:
type: week

Lang:

ftd

Output: type: week

type: color

-- ftd.text-input:
type: color
width.fixed.px: 40
height.fixed.px: 40

Lang:

ftd

Output: type: color

type: file

-- ftd.text-input:
type: file

Lang:

ftd

Output: type: file