Feedback

Feedback includes error handling, alerting, and success messaging.

  • .has-feedback - A context class applied if feedback-specific messaging needs to be applied. Needs to be paired with .error, .success or .alert.
  • .has-feedback.error - Error flavor
  • .has-feedback.alert - Alert flavor
  • .has-feedback.success - Success flavor

Form Feedback

Form feedback includes messaging at the top of a form as well as at the site of an input.

Global Form Feedback

See "Alerts and Notifications".

Local Form feedback

<form action="" class="form-basic">

<label class="has-feedback error input-text">
  <span class="field-name">Input Label (Error)</span>
  <input type="text">
  <div class="feedback-details">A hint about how to fix the error.</div>
</label>

<label class="has-feedback alert input-text">
  <span class="field-name">Input Label (Alert)</span>
  <input type="text">
</label>

<label class="has-feedback success input-text">
  <span class="field-name">Input Label (Success)</span>
  <input type="text">
</label>

</form>

Toggles Feedback

Fieldset Legend
Radio Fieldset Legend
<form action="" class="form-basic">

<!-- Single checkbox, no FIELDSET -->
<label class="input-checkbox has-feedback error" for="checkbox" aria-checked="true" role="checkbox" >
    <input type="checkbox" id="checkbox" name="checkbox" value="checkbox value 3" />
    <button class="standin" role="presentation"></button>
    <span class="field-name" tabindex="0">Checkbox Label</span>
</label>

<!-- Group of checkboxes, wrap with a FIELDSET -->
<fieldset class="has-feedback error">

  <legend>Fieldset Legend</legend>
  <div class="feedback-details">Please select at least one option below.</div>
  <label class="input-checkbox" for="checkbox-1" aria-checked="true" role="checkbox" >
    <input type="checkbox" id="checkbox-1" name="checkbox-1" value="checkbox value 1" />
    <button class="standin" role="presentation"></button>
    <span class="field-name" tabindex="0">Checkbox Label 1</span>
  </label>

  <label class="input-checkbox" for="checkbox-2" aria-checked="true" role="checkbox" >
    <input type="checkbox" id="checkbox-2" name="checkbox-2" value="checkbox value 2" />
    <button class="standin" role="presentation"></button>
    <span class="field-name" tabindex="0">Checkbox Label 2</span>
  </label>

  <label class="input-checkbox" for="checkbox-3" aria-checked="true" role="checkbox" >
    <input type="checkbox" id="checkbox-3" name="checkbox-3" value="checkbox value 2" />
    <button class="standin" role="presentation"></button>
    <span class="field-name" tabindex="0">Checkbox Label 2</span>
  </label>

</fieldset>

<fieldset class="has-feedback error">

  <legend>Radio Fieldset Legend</legend>
  <div class="feedback-details">Please select an option below.</div>
  <label role="radio" aria-checked="true" for="radio-f-1" class="input-radio">
    <input type="radio" name="radio-f" id="radio-f-1" value="radio value 1"  tabindex="11" />
    <button role="presentation" class="standin"></button>
    <span class="field-name">Radio Label 1</span>
  </label>
  <label role="radio" aria-checked="true" for="radio-f-2" class="input-radio">
    <input type="radio" name="radio-f" id="radio-f-2" value="radio value 2" tabindex="12" />
    <button role="presentation" class="standin"></button>
    <span class="field-name">Radio Label 2</span>
  </label>

</fieldset>

</form>

Select Menu Feedback

<form action="" class="form-basic">

<label for="example1" class="has-feedback error">
  <span class="field-name">Select Label</span>
  <div  class="select-menu">
    <select id="example1" name="example">
      <option value="Chrome">Chrome</option>
      <option value="Firefox">Firefox</option>
      <option value="Internet Explorer">Internet Explorer</option>
      <option value="Opera">Opera</option>
      <option value="Safari">Safari</option>
      <option value="Microsoft Edge">Microsoft Edge</option>
    </select>
  </div>
  <div class="feedback-details">Please select an option.</div>
</label>

</form>