-- 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
Attributes
`ftd.text-input` accepts the below attributes along with the
[common attributes](ftd/common/).
`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 ...
`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
`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
`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.
-- ftd.text-input:
multiline: false
-- ftd.text-input:
multiline: true
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
-- ftd.text-input:
enabled: false
value: Hello
-- ftd.text-input:
enabled: true
value: Hello
`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
`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`](ftd/built-in-types/#ftd-text-input-type) type value
and is optional. It has default value as `text`.
-- ftd.text-input:
value: Hello
type: text
-- ftd.text-input:
value: Hello@abc.com
type: email
-- ftd.text-input:
value: Hello
type: password
-- ftd.text-input:
value: https://fastn.com
type: url
-- ftd.text-input:
type: datetime
-- ftd.text-input:
type: date
-- ftd.text-input:
type: time
-- ftd.text-input:
type: month
-- ftd.text-input:
type: week
-- ftd.text-input:
type: color
width.fixed.px: 40
height.fixed.px: 40
-- ftd.text-input:
type: file