Inputs

View code
New in v3.6! The Blaze inputs can be used to provide styled HTML5 inputs.

Use

HTML5 input support, be warned though, many browsers are very naughty in fully supporting all these types.

You will find very mixed support across all the browsers, so if the demo below doesn't work as you expect, please check your browser support first before reporting a bug here.


* Note! all tags here are <rg-input type="[HTML5 INPUT TYPE]" except textarea, which has it's own tag: <rg-textarea...>.

Text Types

text

rg-textarea*

email

tel

search

url

password

Number Types

Note: the posnum type is RiotGear2 specific to make it easy to enter postive numbers. It is really a regular number tag, with a min=0.

number

posnum

number [5..10]

range [0..20] / 5

Date/Time Types

date

datetime

time

week

month

Input Attributes

Inline settings: value | type | min | max | step | size | placeholder | disabled | required

type: [HTML5 TYPE NAME] More info here. We've added one more type: posnum which only allows postive numbers to be input.

style: <empty> | info | brand | warning | error | success

value: [TEXT] appropriate value for HTML5 input type

required: yes | no OR true | false

disabled: yes | no OR true | false

For number and range types only

min: [INTEGER]

max: [INTEGER]

step: [INTEGER]


Note: If a value is below MIN it will adjusted to MIN. If it is above MAX, it will be set to MAX.

Events

change: triggered on "update"

changed: triggered on "updated"

HTML

This tag supports the standard HTML5 browser types, however there is lots support differences across all the browsers.


  	<rg-input></rg-input>

        <rg-input style="error" placeholder="Enter something here"></rg-input>

        <rg-input type="posnum"  placeholder="years active" required=true value="22"></rg-input>

        <rg-input type="number" min=5 max=10 value=2 step=2></rg-input>

        <rg-input type="range" min=0 step=5 max="15"></rg-input>



    riot.mount ("rg-input", {input: {
                            style: [STYLE TEXT],
                            type: [HTML5 INPUT TYPE],
                            placeholder: [TEXT],
                            value: [INIIT VALUE],
                            min: [NUMBER],   // only applies to types:NUMBER and RANGE.
                            max: [NUMBER],   // only applies to types:NUMBER and RANGE.
                            step: [NUMBER],  // only applies to types:NUMBER and RANGE.
                            size: [NUMBER],
                            required: [BOOLEAN],
                            disabled: [BOOLEAN],
    }) ;