Back to the list

Input

All the HTML inputs but checkboxes or radio. For a better user experience, try to always have a label.

File to include

@import "components/input";

Script to include

<script src="/lib/input.js"></script>

Text input

<input type="text" placeholder="Text" />
    
<input type="text" value="Text disabled" disabled />

<div class="input-content input-validate" data-validate="not-passed">
    <input type="text" placeholder="Validate not passed" />
</div>

<div class="input-content" data-icon="mail-solid">
    <input type="text" placeholder="Input with icon">
</div>

Text input with label and helpers

Helper

Helper bottom 
<div class="input-container">
    <label for="input-demo">Label</label>
    <p>Helper</p>
    <input type="text" placeholder="Input with label and helpers">
    <small>Helper bottom</small>
</div>

Password input

<div class="input-content input-password">
    <input type="password" value="Password">
</div>

<div class="input-content input-password" data-icon-show="eye-slash-solid" data-icon-hide="eye-solid">
    <input type="password" value="Password">
</div>

File input

<input type="file">

<input type="file" disabled>

Url input

<div class="input-content input-url">
    <input type="url" placeholder="url">
</div>

Calendar input

<div class="input-content input-date">
    <input type="date">
</div>

<div class="input-content input-date" data-icon-calendar="calendar-regular">
    <input type="datetime-local">
</div>

Time input

<div class="input-content input-time">
    <input type="time">
</div>

Search input

<div class="input-content input-search">
    <input type="search" placeholder="Search input">
</div>

<div class="input-content input-search">
    <input type="search" placeholder="Search input" value="search">
</div>

Select

<div class="input-content input-select">
    <select>
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
    </select>
</div>

Textarea

<textarea placeholder="Textarea"></textarea>

<textarea placeholder="Textarea" disabled></textarea>

Attributes

Name Example value Possible values Default Required
data-icon (input-content) user-solid - None No
data-text-hide (input-content) Cacher - Hide No
data-text-show (input-content) Montrer - Show No
data-icon-hide (input-content) eye-solid - None No
data-icon-show (input-content) eye-slash-solid - None No
data-icon-clear (input-content) close-regular - close-solid No
data-icon-calendar (input-content) calendar-regular - calendar-solid No
data-icon-clock (input-content) clock-regular - clock-solid No
data-validate (input-content) not-passed "not-passed" | "passed" None No
data-icon-passed (input-content) check-circle-regular - check-circle-solid No
data-icon-not-passed (input-content) close-circle-regular - close-circle-solid No
maxlength (input) 300 - None No