Overview
Design
Frontend
Fullstack
Create Website
Blog
Frontend
Docs
->
Kernel Components
->
ftd.text-input
Docs
Book 🚧
Learn
Why Use fastn for Your Next Frontend?
Getting Started
Data Modelling
Variables
Built-in Types
record
or-type
list
component
Headers
Visibility
Commenting
Kernel Components
ftd.document 🚧
ftd.row
ftd.column
ftd.container
ftd.text
ftd.image
ftd.rive
ftd.iframe
ftd.integer
ftd.decimal
ftd.boolean
ftd.code
ftd.text-input
ftd.checkbox
ftd.desktop
ftd.mobile
Attributes
Common Attributes
Text Attributes
Container Attributes
Container Root Attributes
import
Using export/exposing
Functions
Built-in Functions
Built-in Rive Functions
Built-in Variables
ftd Events
Rive Events
Use color scheme package
processor
foreign variables
assets
How to access files
How to access fonts
How to make page responsive
Using JS
JS in function
Web Component
Create fastn package
Best Practices
Formatting
Import
Auto-import
Device
Conditions
Container
Same argument & attribute types
FScript
Inherited Types
Variable & it’s Type
Optional Arguments
Commenting
Self referencing
Property

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.

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

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

Support fastn!

Enjoying fastn? Please consider giving us a star ⭐️ on GitHub to show your support!
⭐️

Getting Help

Have a question or need help?

Visit our GitHub Q&A discussion to get answers and subscribe to it to stay tuned.

Join our Discord channel and share your thoughts, suggestion, question etc.

Connect with our community!
💻️

Found an issue?

If you find some issue, please visit our GitHub issues to tell us about it.

Join us

We welcome you to join our Discord 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.
Copyright © 2023 - FifthTry.com