ftd.text-input
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
.-- 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
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.
-- ftd.text-input:
placeholder: Type any text ...
value: optional string
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.
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.
multiline
attribute with true
value defines a multi-line text input
control.multiline: false
-- ftd.text-input:
multiline: false
multiline: false
multiline: true
-- ftd.text-input:
multiline: true
multiline: true
enabled: optional boolean
enabled
attribute, when set false, makes the element not mutable and
un-focusable. By default, the value is trueenabled: false
-- ftd.text-input:
enabled: false
value: Hello
enabled: false
enabled: true
-- ftd.text-input:
enabled: true
value: Hello
enabled: true
max-length: optional integer
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
max-length
is set to 10 characterstype: optional ftd.text-input-type
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
type: text
type: email
-- ftd.text-input:
value: Hello@abc.com
type: email
type: email
type: password
-- ftd.text-input:
value: Hello
type: password
type: password
type: url
-- ftd.text-input:
value: https://fastn.com
type: url
type: url
type: datetime
-- ftd.text-input:
type: datetime
type: datetime
type: date
-- ftd.text-input:
type: date
type: date
type: time
-- ftd.text-input:
type: time
type: time
type: month
-- ftd.text-input:
type: month
type: month
type: week
-- ftd.text-input:
type: week
type: week
type: color
-- ftd.text-input:
type: color
width.fixed.px: 40
height.fixed.px: 40
type: color
type: file
-- ftd.text-input:
type: file
type: file