`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](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 ...

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`

`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`.

`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`

Support `fastn`!

Enjoying `fastn`? Please consider giving us a star ⭐️ on [GitHub](https://github.com/fastn-stack/fastn) to show your support!

[⭐️](https://github.com/fastn-stack/fastn)

Getting Help

Have a question or need help? Visit our [GitHub Q&A discussion](https://github.com/fastn-stack/fastn/discussions/categories/q-a) to get answers and subscribe to it to stay tuned. Join our [Discord](https://discord.gg/a7eBUeutWD) channel and share your thoughts, suggestion, question etc. Connect with our [community](/community/)!

[💻️](/community/)

Found an issue?

If you find some issue, please visit our [GitHub issues](https://github.com/fastn-stack/fastn/issues) to tell us about it.

Quick links:

- [Install `fastn`](install/) - [Create `fastn` package](create-fastn-package/) - [Expander Crash Course](expander/) - [Syntax Highlighting in Sublime Text](/sublime/)

Join us

We welcome you to join our [Discord](https://discord.gg/a7eBUeutWD) community today. We are trying to create the language for human beings and we do not believe it would be possible without your support. We would love to hear from you.