INPUT

<INPUT/> : FormField

The <INPUT/> widget creates an editable text field to take in, edit, update, validate and mask user data. The <INPUT/> widget can be used on its own or as a field within a <FORM/>.

Restrictions:

Attributes

Name	Type	Default	Description	Req
Behavior
type	string		Shorthand for a mix of mask and validation: email : valid email address phone : valid phone number in format +# (###) ### #### currency : curreny formatted as $$$.$$ credit : credit card number cvc : credit card 3 digit pin in format ### bool : restricted to 0 and 1 numeric : valid number ###.## int : numeric : valid integer ### expiry : Valid expiry date in format MM/YY
allow	string		A regex expression which defines allowable input characters
deny	string		A regex expression which defines restricted input characters
mask	string		The masking used for formatting typed characters. Uses Flutter Multi Formatter for masking.
keyboardinput	string	next	mobile keyboard input action: next done go search send
keyboardtype	string	text	mobile keyboard display type: text url name number numeric datetime emailaddress phone streetaddress multiline
clear	bool	false	Show/Hide the field's clear button
debounce	int	1000	Duration in milliseconds where a pause in typing longer that this value, automatically commits the string. When set to 0, the typed value is committed only after the field loses focus
Size
length	int		The max length in characters allowed.
width	int	200	width of the input field. Expands to fill its parent unless the parent had an infinite width in which case the input is limited to 200 pixels.
size	int	16	Input font size
lines	int	1	The minimum number of lines to display
maxlines	int		The maximum number of lines to display
dense	bool	false	Set true for a more compact version of the input for small areas
Borders
border	string	all	all none underline bottom
bordercolor	string		The color of the border
borderwidth	1		The width in pixels of the border
radius	int	2	The corner radius of the border. Applies only for border="all"
Display
hint	string		The hint text to display when empty
obscure	bool	false	Obscure the input visual (ex: passwords)
icon	string		The prefix icon to display
halign	string	start	The text alignment within the input. start end center
padding	int	2	The padding around the characters in the field.
color	string		The default text color
case	string	mixed	The case of the typed text. upper lower mixed

Properties

Name	Values	Default	Description

Events

Name	Description
onchange	The string of events executed on value change.
onfocus	The string of events executed when the input receives focus.
onblur	The string of events executed when the input loses focus.

Methods

Name	Description

Examples

Example #1 - 3 inputs using the various attributes and showing the error state.

<FML center="true" layout="column">

  <INPUT id="mobile" mask="### ### ####" allow="0-9" keyboardtype="number" width="70%" maxwidth="300" radius="2" value="" hint="Mobile Number, 10 digits, no country code" margin="10"/>
  <INPUT id="mobiletype" type="phone" width="70%" maxwidth="300" radius="99" hint="Mobile Number autodetect country" margin="10" />
  <INPUT id="Password"   type="password" width="70%" maxwidth="300" radius="99" hint="Password" margin="10"/>

</FML>

See it in Action

Other Pages You May Find Useful:

• <ALARM/>
• <FORM/>
• <SELECT/>
• <TYPEAHEAD/>