INPUT - AppDaddy-Software-Solutions-Inc/framework-markup-language GitHub Wiki

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

    img

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

    logo See it in Action

    Other Pages You May Find Useful:

    ⚠️ **GitHub.com Fallback** ⚠️