Input
Inputs collect data from the user.
<wa-input>
component!
Text Fields Jump to heading
<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 Jump to heading
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 Jump to heading
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 Jump to heading
<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 Jump to heading
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.
Add the following code to the <head>
of your page:
<link rel="stylesheet" href="https://early.webawesome.com/webawesome@3.0.0-alpha.12/dist/styles/native/input.css" />
Add the following code at the top of your CSS file:
@import url('https://early.webawesome.com/webawesome@3.0.0-alpha.12/dist/styles/native/input.css');
To use all of Web Awesome Native styles, follow the instructions on the Native Styles overview page.