Form

<form>
    <fieldset class="fieldset">
        <legend class="legend">Details</legend>
        <div class="form-group">
            <label class="form-label form-label--emphasized" for="title">Title</label>
            <select class="form-control" id="title">
                <option value="">Please choose</option>
                <option value="dr">Dr.</option>
                <option value="prof-dr">Prof. Dr.</option>
            </select>
        </div>
        <div class="form-group">
            <label class="form-label form-label--emphasized" for="first_name">First name</label>
            <input type="text" id="first_name" class="form-control" placeholder="e.g. Arnulf Beckenbauer"><small class="form-text">Enter something meaningful</small>
        </div>
        <div class="form-group form-group--invalid">
            <label class="form-label form-label--emphasized" for="last_name">Last name</label>
            <input type="text" id="last_name" class="form-control"><small class="form-text">Last name is mandatory</small>
        </div>
        <div class="form-group">
            <label class="form-label form-label--emphasized" for="bio">Biography</label>
            <textarea id="bio" class="form-control" rows="8"></textarea>
        </div>
        <div class="form-group">
            <div class="form-label form-label--emphasized">Sex</div>
            <div class="custom-form-control radio">
                <input type="radio" id="customRadio1" checked="checked" name="customRadio" class="form-control__input">
                <label class="form-label" for="customRadio1">Female</label>
            </div>
            <div class="custom-form-control radio">
                <input type="radio" id="customRadio2" name="customRadio" class="form-control__input">
                <label class="form-label" for="customRadio2">Male</label>
            </div>
            <div class="custom-form-control radio">
                <input type="radio" id="customRadio3" name="customRadio" class="form-control__input">
                <label class="form-label" for="customRadio3">Dunno</label>
            </div>
        </div>
        <div class="form-group">
            <div class="custom-form-control checkbox">
                <input id="custom-checkbox-1" type="checkbox" class="form-control__input">
                <label for="custom-checkbox-1" class="form-label">I'm a gold member</label>
            </div>
        </div>
    </fieldset>
    <input type="submit" value="Submit" class="btn btn--cta btn--small">
</form>
<form>
    <fieldset class="fieldset">
        <legend class="legend">Details</legend>
        <div class="form-group">
            <label class="form-label form-label--emphasized" for="title">Title</label>
            <select class="form-control" id="title">
                <option value="">Please choose</option>
                <option value="dr">Dr.</option>
                <option value="prof-dr">Prof. Dr.</option>
            </select>
        </div>
        <div class="form-group">
            <label class="form-label form-label--emphasized" for="first_name">First name</label>
            <input type="text" id="first_name" class="form-control" placeholder="e.g. Arnulf Beckenbauer" />
            <small class="form-text">Enter something meaningful</small>
        </div>
        <div class="form-group form-group--invalid">
            <label class="form-label form-label--emphasized" for="last_name">Last name</label>
            <input type="text" id="last_name" class="form-control" />
            <small class="form-text">Last name is mandatory</small>
        </div>
        <div class="form-group">
            <label class="form-label form-label--emphasized" for="bio">Biography</label>
            <textarea id="bio" class="form-control" rows="8" />
        </div>
        <div class="form-group">
            <div class="form-label form-label--emphasized">Sex</div>
            <div class="custom-form-control radio">
              <input type="radio" id="customRadio1" checked="checked" name="customRadio" class="form-control__input" />
              <label class="form-label" for="customRadio1">Female</label>
            </div>
            <div class="custom-form-control radio">
              <input type="radio" id="customRadio2" name="customRadio" class="form-control__input" />
              <label class="form-label" for="customRadio2">Male</label>
            </div>
            <div class="custom-form-control radio">
              <input type="radio" id="customRadio3" name="customRadio" class="form-control__input" />
              <label class="form-label" for="customRadio3">Dunno</label>
            </div>
        </div>
        <div class="form-group">
            <div class="custom-form-control checkbox">
                <input id="custom-checkbox-1" type="checkbox" class="form-control__input" />
                <label for="custom-checkbox-1" class="form-label">I'm a gold member</label>
            </div>
        </div>
    </fieldset>
    <input type="submit" value="Submit" class="btn btn--cta btn--small" />
</form>
/* No context defined for this component. */
  • Content:
    .form--inverted {
      .form-label {
        color: $form-label-inverted-color;
      }
    
      .form-control {
        border-color: $form-control-inverted-border-color;
    
        &:hover,
        &:focus {
          background-color: $form-control-inverted-focus-bg;
          color: $form-control-inverted-focus-color;
        }
      }
    
      .form-group--invalid {
        .form-control {
          border-color: $form-control-invalid-border-color;
        }
      }
    }
    
  • URL: /components/raw/form/_form.scss
  • Filesystem Path: components/03-organisms/form/_form.scss
  • Size: 409 Bytes

There are no notes for this item.