Native Styles

Input

<input>

Inputs collect data from the user.

Want to do more? Check out the <wa-input> component!

Text Fields 

<label>Input (text) <input type="text" placeholder="placeholder"></label>
<wa-input label="WA Input (text)" type="text" placeholder="placeholder"></wa-input>

<label>Input (number) <input type="number"></label>
<wa-input label="WA Input (number)" type="number"></wa-input>

<label>Input (password) <input type="password" required></label>
<wa-input label="WA Input (password)" type="password" required></wa-input>

<label>Input (email) <input type="email"></label>
<wa-input label="WA Input (email)" type="email"></wa-input>

<label>Input (search) <input type="search"></label>
<wa-input label="WA Input (search)" type="search"></wa-input>

<label>Input (tel) <input type="tel"></label>
<wa-input label="WA Input (tel)" type="tel"></wa-input>

<label>Input (url) <input type="url"></label>
<wa-input label="WA Input (url)" type="url"></wa-input>

Pill shaped text fields

Add the wa-pill class to an <input> to make it pill-shaped.

<label>Input <input type="text" placeholder="placeholder" class="wa-pill"></label>

Color Picker

Basic:

<label>Input (color) <input type="color" value="#ff0066"></label>
<wa-color-picker label="WA Color Picker" value="#ff0066"></wa-color-picker>

With swatches:

<label>Input (color) <input type="color" value="#ff0066" list="swatches"></label>
<datalist id="swatches">
  <option value="#0070ef">Web Awesome Blue</option>
  <option>#f5a623</option>
  <option>#f8e71c</option>
  <option>#8b572a</option>
  <option>#7ed321</option>
  <option>#417505</option>
  <option>#bd10e0</option>
  <option>#9013fe</option>
</datalist>

<wa-color-picker label="WA Color Picker" value="#ff0066"
 swatches="#0070ef; #f5a623; #f8e71c; #8b572a; #7ed321; #417505; #bd10e0; #9013fe;"></wa-color-picker>

Time and Date Pickers 

<label>Input (datetime-local) <input type="datetime-local"></label>
<wa-input label="WA Input (datetime-local)" type="datetime-local"></wa-input>

<label>Input (date) <input type="date"></label>
<wa-input label="WA Input (date)" type="date"></wa-input>

<label>Input (time) <input type="time"></label>
<wa-input label="WA Input (time)" type="time"></wa-input>

Opting In to Native Input Styles

If you want to use the Native Input styles without including the entirety of Web Awesome Native Styles, you can include the following CSS files from the Web Awesome CDN.

In HTML In CSS

Add the following code to the <head> of your page:

<link rel="stylesheet" href="https://early.webawesome.com/[email protected]/dist/styles/native/input.css" />

Add the following code at the top of your CSS file:

@import url('https://early.webawesome.com/[email protected]/dist/styles/native/input.css');

To use all of Web Awesome Native styles, follow the instructions on the Native Styles overview page.

    No results