component

Help text

A simple .help-text class helper in case success or error input message.

In case of no error you can add the success modifier:

  <div class="field">
    <div class="control">
      <label class="label">User name</label>
      <input class="input" type="text" value="inboundcycle">
    </div>
    <p class="help-text success">User found!</p>
  </div>

User name

User found!

In case error you can add the error modifier:

  <div class="field">
    <div class="control">
      <label class="label">User name</label>
      <input class="input" type="text" required>
    </div>
    <p class="help-text error">This field is required</p>
  </div>

User name

This field is required

Variables

  :root {
    --help-text-size: var(--text-xs, .6875rem);
    --help-text-top-space: var(--space-xxs, .75rem);
    --help-text-error-color: #ff4757;
    --help-text-success-color: #46c93a;
  }