Molecule

Form Group

Show code
            
              <div class="form-group">
  <label for="exampleID" class="form-label">From Group</label> <input class="form-text form-control" type="text" value="value" id="exampleID" name="form-name" placeholder="Placeholder">
</div>

            
          

.form-group--disabled

Show code
            
              <div class="form-group form-group--disabled">
  <label for="exampleID" class="form-label">From Group</label> <input class="form-text form-control" type="text" value="value" id="exampleID" name="form-name" placeholder="Placeholder">
</div>

            
          

.form-group--error

Show code
            
              <div class="form-group form-group--error">
  <label for="exampleID" class="form-label">Input with danger</label> <input class="form-text form-control form-control-danger" type="text" value="value" id="exampleID" name="form-name" placeholder="Placeholder">
  <div class="form-control-feedback">
    Sorry, that username"s taken. Try another?
  </div>
</div>

            
          

.form-group--success

Show code
            
              <div class="form-group form-group--success">
  <label for="exampleID" class="form-label">Input with success</label> <input class="form-text form-control form-control-success" type="text" value="value" id="exampleID" name="form-name" placeholder="Placeholder">
  <div class="form-control-feedback">
    Success! You"ve done it.
  </div>
</div>

            
          

.form-group--warning

Show code
            
              <div class="form-group form-group--warning">
  <label for="exampleID" class="form-label">Input with warning</label> <input class="form-text form-control form-control-warning" type="text" value="value" id="exampleID" name="form-name" placeholder="Placeholder">
  <div class="form-control-feedback">
    Shucks, check the formatting of that and try again.
  </div>
</div>