We're currently working on the future of the Design system at Co-op

We'll start talking about this publicly as soon as we can. In the meantime this site will remain up to date with our current design patterns.

Input live

Make the length of the text input box appropriate for the amount of information needed: do not make it frustratingly short or intimidatingly long.

Example

Example

Input

Input with hint

This is an example hint

Input with error message

Enter your full name

Input with hint and error message

This is an example hint

Enter your full name

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>