Input

• Validate modifier
• Valid modifier

Component c-input is dedicated to common <input> form HTML tags:

<!-- Standard input -->
<input type="text" placeholder="Placeholder text">
<br><br>

<input class="c-input" type="text" placeholder="Placeholder text">
<br><br>

<label for="foo2">Inline label</label>
<input class="c-input u-pt-4" type="text" id="foo2" placeholder="Placeholder text">
<br><br>

<label for="foo3">Inline label</label><br>
<input class="c-input u-pt-4" type="text" id="foo3" placeholder="Placeholder text">
<br><br>

<div class="c-pos m-relative">
    <input class="c-input" type="text" id="foo4" placeholder="Placeholder text">
    <label for="foo4" class="c-pos m-absolute m-top-left c-txt m-fs-3 u-c-neutral-500 u-pt-1 u-pl-4">Label text</label>
</div>
<!-- DEMO ONLY -->
<style>
    body {
        padding: 2em
    }
</style>

Validate modifier

Inputs come with CSS only validation through m-validate modifier. Once valid, the form style changes. No Javascript involved.

<!-- No CSS validation -->
<div class="c-pos m-relative">
    <input  type="text"
            class="c-input" 
            id="firstname_0" 
            placeholder="Prénom" 
            pattern=".*\S.*"
            required>
    <label for="firstname_0" class="c-pos m-absolute m-top-left c-txt m-fs-3 u-c-neutral-500 u-pt-1 u-pl-4">Prénom</label>
</div>
<br><br>
<!-- With CSS validation -->
<div class="c-pos m-relative">
    <input  type="text"
            class="c-input m-validate" 
            id="firstname" 
            placeholder="Prénom" 
            pattern=".*\S.*"
            required>
    <label for="firstname" class="c-pos m-absolute m-top-left c-txt m-fs-3 u-c-neutral-500 u-pt-1 u-pl-4">Prénom avec validation CSS</label>
</div>
<!-- DEMO ONLY -->
<style>
    body {
        padding: 2em
    }
</style>

Valid modifier

Forces the valid state with the m-valid modifier.

<!-- No force valid -->
<div class="c-pos m-relative">
    <input  type="text"
            class="c-input" 
            id="firstname_0" 
            placeholder="Prénom" 
            pattern=".*\S.*"
            required>
    <label for="firstname_0" class="c-pos m-absolute m-top-left c-txt m-fs-3 u-c-neutral-500 u-pt-1 u-pl-4">Prénom</label>
</div>
<br><br>
<!-- No force valid modifier -->
<div class="c-pos m-relative">
    <input  type="text"
            class="c-input m-valid" 
            id="firstname" 
            placeholder="Prénom" 
            pattern=".*\S.*"
            required>
    <label for="firstname" class="c-pos m-absolute m-top-left c-txt m-fs-3 u-c-neutral-500 u-pt-1 u-pl-4">Prénom</label>
</div>
<!-- DEMO ONLY -->
<style>
    body {
        padding: 2em
    }
</style>