Friday, May 17, 2019

Lightning:input

Lightning:input is used to accept user input. Depending on the type of input provided by user we have checkbox, date, datetime, time, email, file, password, search, tel, url, number, radio, toggle type input. The default is text. We can use input events like onblur, onfocus, and onchange with Lightning:input.

Date Input


<lightning:input type="date" name="DateField" label="Enter a date" />

Datetime

<lightning:input type="datetime" label="Enter a value" name="datetime" />

Checkbox

<lightning:input type="checkbox" label="option 1" name="Checkboxfield" checked="true" or "false"/>

Email

<lightning:input type="email" label="Email" name="emailfield" value="testabc@xyz.com" />

File

<lightning:input name="Filefield" type="file" label="Attachment" multiple="true" accept="image/png, .zip" onchange="{! c.handleFilesChange }"/>

Files uploaded using type="file" are subject to a 1 MB size limit, or about 4 MB if you chunk the files.

Text

<lightning:input name="input1" label="Enter some text" />

Password

<lightning:input type="password" label="Enter your password" name="input1"  />

Telephone input

<lightning:input type="tel" label="Basic phone field" name="phone2" placeholder="Enter telephone"/>

URL

<lightning:input type="url" label="Enter a URL" name="input1" />

Number

 <lightning:input type="number" name="input1" label="Enter a number" />

Toggle

 <lightning:input type="toggle" label="Basic option" name="input1"/>

Radio

<lightning:input type="radio" label="Radio Option" name="options" value="1"/>

Search

<lightning:input
            aura:id="someid"
            name="SearchText"
            label="Enter keyword to search"
            type="search"
        />

Lightning:Select

<lightning:select aura:id="id1" label="Select the book" name="book" >
        <option value="">Choose a book</option>
        <option value="Book1">Book1</option>
        <option value="Book2">Book2</option>
        <option value="Book3">Book3 </option>

    </lightning:select>

No comments:

Post a Comment