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>

<div class="demo demo--inverted">
    <form class="form--inverted">
        <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>
</div>
<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>

<div class="demo demo--inverted">
    <form class="form--inverted">
        <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>
</div>
/* No context defined. */
  • Content:
    form,
    .fieldset {
      > * + * {
        margin-top: $spacer-md;
      }
    }
    
    .form--inverted {
      .form-label,
      .form-text {
        color: $form-label-inverted-color;
      }
    
      .form-control {
        border-color: $form-control-inverted-border-color;
        caret-color: $form-control-inverted-caret-color;
    
        &:hover,
        &:focus {
          color: $form-control-inverted-focus-color;
          background-color: $form-control-inverted-focus-bg;
        }
      }
    
      .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: 541 Bytes

No notes defined.