Hint

This module helps to show inline messages in forms.

Usage #

Use the hint class to make the description of the form fields.


<form class="form">
    <div class="form-item">
        <label>Name <span class="hint">...</span></label>
        <input class="input" type="text">
    </div>
    <div class="form-item">
        <label>Email</label>
        <input class="input" type="email">
        <div class="hint">...</div>
    </div>
</form>

Use the hint-success and hint-error classes to display different states of descriptions.


<form class="form">
    <div class="form-item">
        <label>Name <span class="hint hint-success">...</span></label>
        <input class="input" type="text">
    </div>
    <div class="form-item">
        <label>Email</label>
        <input class="input" type="email" class="input input-error">
        <div class="hint hint-error">...</div>
    </div>
</form>

Required

Use the hint-req classes to indicate the required field.


<form class="form">
    <div class="form-item">
        <label>Name</label>
        <input class="input" type="text">
    </div>
    <div class="form-item">
        <label>Email <span class="hint hint-req">*</span></label>
        <input class="input" type="email">
    </div>
</form>

Variables #

Here are the CSS variables used in the module. Setting them allows you to change the appearance and parameters of the module.


// colors
--hint-color: var(--palette-black-50);

// params
--hint-font-size: 13px;
--hint-font-weight: normal;
--hint-font-style: normal;
--hint-line-height: var(--body-text-line)