Input live

Example

HTML

                                
<!-- Input -->
<form class="coop-form">
    <h3>Input</h3>

    <div class="coop-form__row">
        <label for="full-name-1" class="coop-form__label">Full name</label>
        <input type="text" name="full-name-1" id="full-name-1" class="coop-form__field coop-form__input">
    </div>
</form>

<!-- Input with hint -->
<form class="coop-form">
    <h3>Input with hint</h3>

    <div class="coop-form__row">
        <label for="full-name-2" class="coop-form__label">Full name</label>
        <p id="full-name-2-hint" class="coop-form__hint">This is an example hint</p>
        <input type="text" name="full-name-2" id="full-name-2" class="coop-form__field coop-form__input" aria-describedby="full-name-2-hint">
    </div>
</form>

<!-- Input with error message -->
<form class="coop-form">
    <h3>Input with error message</h3>

    <div class="coop-form__row">
        <label for="full-name-3" class="coop-form__label">Full name</label>
        <p id="full-name-3-error" class="coop-form__error">Enter your full name</p>
        <input type="text" name="full-name-3" id="full-name-3" class="coop-form__field coop-form__input coop-form__invalid" aria-describedby="full-name-3-error">
    </div>
</form>

<!-- Input with hint and error message -->
<form class="coop-form">
    <h3>Input with hint and error message</h3>

    <div class="coop-form__row">
        <label for="full-name-4" class="coop-form__label">Full name</label>
        <p id="full-name-4-hint" class="coop-form__hint">This is an example hint</p>
        <p id="full-name-4-error" class="coop-form__error">Enter your full name</p>
        <input type="text" name="full-name-4" id="full-name-4" class="coop-form__field coop-form__input coop-form__invalid" aria-describedby="full-name-4-hint full-name-4-error">
    </div>
</form>