Forms

        <h3 class="styleguide-headline">Text Input</h3>

<div class="form-group row string required flight_calculator_from">
  <label class="col-form-label label-col string required"
         for="flight_calculator_from">
    Text Input
    <abbr title="required">*</abbr>
  </label>
  <div class="input-wrapper wrapper-col wrapper-col-full-width">
    <input class="form-control string required" type="text"
          name="flight_calculator[from]" id="flight_calculator_from"
          autocomplete="off">
  </div>
</div>

<div class="py-3"></div>

<div class="form-group row string required flight_calculator_from">
  <label class="col-form-label label-col string required"
         for="flight_calculator_from">
    Text Input with Hint <abbr title="required">*</abbr>
  </label>
  <div class="input-wrapper wrapper-col wrapper-col-full-width">
    <input class="form-control is-valid-unused string required"
          type="text" name="flight_calculator[from]"
          id="flight_calculator_from" autocomplete="off">
    <small class="form-text text-muted">this is a hint</small>
  </div>
</div>

<div class="py-3"></div>

<div class="form-group row string optional car_calculator_km">
  <label class="col-form-label label-col string optional"
         for="car_calculator_km">
    Text Input extended
  </label>
  <div class="input-group wrapper-col wrapper-col-full-width">
    <div class="input-group-prepend">
      <span class="input-group-text">
        www.
      </span>
    </div>
    <input class="form-control string optional"
           type="text" name="car_calculator[km]" id="car_calculator_km">
    <div class="input-group-append">
      <span class="input-group-text">
        .de
      </span>
    </div>
  </div>
</div>

<div class="py-3"></div>

<div class="form-group row string required flight_calculator_from form-group-invalid">
  <label class="col-form-label label-col string required"
         for="flight_calculator_from">
    invalid Text Input
    <abbr title="required">*</abbr>
  </label>
  <div class="input-wrapper wrapper-col wrapper-col-full-width">
    <input class="form-control is-invalid string required"
           aria-invalid="true" type="text" name="flight_calculator[from]"
           id="flight_calculator_from" autocomplete="off">
    <div class="invalid-feedback">can't be blank</div>
  </div>
</div>

<div class="py-3"></div>

<div class="form-group row string required flight_calculator_from form-group-invalid">
  <label class="col-form-label label-col string required"
         for="flight_calculator_from">
    invalid Text Input extended
    <abbr title="required">*</abbr>
  </label>
  <div class="input-group wrapper-col wrapper-col-full-width">
    <div class="input-group-prepend">
      <span class="input-group-text">www.</span>
    </div>
    <input class="form-control is-invalid string required"
           aria-invalid="true" type="text" name="flight_calculator[from]"
           id="flight_calculator_from" autocomplete="off">
    <div class="input-group-append">
      <span class="input-group-text">.com</span>
    </div>
  </div>
  <div class="invalid-feedback col-12">can't be blank</div>
</div>
      

        <h3 class="styleguide-headline">Number Input</h3>

<div class="form-group row number required flight_calculator_from">
  <label class="label-col col-form-label number required"
         for="flight_calculator_from">
    Number Input
    <abbr title="required">*</abbr>
  </label>
  <div class="input-wrapper wrapper-col wrapper-col-full-width">
    <input class="form-control string required" type="number"
          name="flight_calculator[from]" id="flight_calculator_from"
          autocomplete="off">
  </div>
</div>

<div class="py-3"></div>

<div class="form-group row number required flight_calculator_from">
  <label class="label-col col-form-label number required"
         for="flight_calculator_from">
    Number Input with Hint <abbr title="required">*</abbr>
  </label>
  <div class="input-wrapper wrapper-col wrapper-col-full-width">
    <input class="form-control is-valid-unused string required"
          type="number" name="flight_calculator[from]"
          id="flight_calculator_from" autocomplete="off">
    <small class="form-text text-muted">this is a hint</small>
  </div>
</div>

<div class="py-3"></div>

<div class="form-group row float optional">
  <label class="col-form-label label-col float optional"
         for="power_consumption_kwh">
    <span>Number Input extended</span>
  </label>
  <div class="input-wrapper wrapper-col wrapper-col-full-width">
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text">
          ~
        </span>
      </div>
      <input class="form-control numeric float optional"
             step="100" type="number"
             name="power_consumption_kwh"
             id="power_consumption_kwh">
      <div class="input-group-append">
        <span class="input-group-text">
          kWh
        </span>
      </div>
    </div>
  </div>
</div>

<div class="py-3"></div>

<div class="form-group row number required flight_calculator_from form-group-invalid">
  <label class="label-col col-form-label number required"
         for="flight_calculator_from">
    invalid Number Input
    <abbr title="required">*</abbr>
  </label>
  <div class="input-wrapper wrapper-col wrapper-col-full-width">
    <input class="form-control is-invalid string required"
           aria-invalid="true" type="number" name="flight_calculator[from]"
           id="flight_calculator_from" autocomplete="off">
    <div class="invalid-feedback">can't be blank</div>
  </div>
</div>

<div class="py-3"></div>

<div class="form-group row float optional form-group-invalid">
  <label class="col-form-label label-col float optional"
         for="power_consumption_kwh">
    <span>invalid Number Input extended</span>
  </label>
  <div class="input-wrapper wrapper-col wrapper-col-full-width">
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text">
          ~
        </span>
      </div>
      <input class="form-control is-invalid numeric float optional"
             step="100" type="number"
             name="power_consumption_kwh"
             id="power_consumption_kwh">
      <div class="input-group-append">
        <span class="input-group-text">
          kWh
        </span>
      </div>
    </div>
  </div>
  <div class="invalid-feedback col-12">can't be blank</div>
</div>

      

        <h3 class="styleguide-headline">Text Area</h3>

<div class="form-group row text required flight_calculator_from">
  <label class="label-col col-form-label number required"
         for="flight_calculator_from">
    Text Area
    <abbr title="required">*</abbr>
  </label>
  <div class="input-wrapper wrapper-col wrapper-col-full-width">
    <textarea class="form-control"
              placeholder="Add important information here"
              name="flight_calculator[from]"></textarea>
  </div>
</div>

<div class="py-3"></div>

<div class="form-group row text required flight_calculator_from">
  <label class="label-col col-form-label number required"
         for="flight_calculator_from">
    Text Area with Hint <abbr title="required">*</abbr>
  </label>
  <div class="input-wrapper wrapper-col wrapper-col-full-width">
    <textarea class="form-control"
              placeholder="Add important information here"
              name="flight_calculator[from]"></textarea>
    <small class="form-text text-muted">this is a hint</small>
  </div>
</div>

<div class="py-3"></div>

<div class="form-group row text required flight_calculator_from form-group-invalid">
  <label class="label-col col-form-label number required"
         for="flight_calculator_from">
    invalid Text Area
    <abbr title="required">*</abbr>
  </label>
  <div class="input-wrapper wrapper-col wrapper-col-full-width">
    <textarea class="form-control is-invalid"
              placeholder="Add important information here"
              name="flight_calculator[from]"></textarea>
    <div class="invalid-feedback">can't be blank</div>
  </div>
</div>
      

        <h3 class="styleguide-headline">Select Field</h3>

<div class="form-group row select optional small-input">
  <label class="col-form-label label-col select optional"
         for="flight_calculator_passengers">
    Select Field
  </label>
  <div class="input-wrapper wrapper-col wrapper-col-full-width">
    <select class="form-control select optional"
            name="flight_calculator[passengers]"
            id="flight_calculator_passengers">
      <option selected="selected" value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
    </select>
  </div>
</div>

<div class="py-3"></div>

<div class="form-group row select optional small-input">
  <label class="col-form-label label-col select optional"
         for="flight_calculator_passengers">
    Select Field with Hint
  </label>
  <div class="input-wrapper wrapper-col wrapper-col-full-width">
    <select class="form-control select optional"
            name="flight_calculator[passengers]"
            id="flight_calculator_passengers">
      <option selected="selected" value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
    </select>
    <small class="form-text text-muted">this is a hint</small>
  </div>
</div>

<div class="py-3"></div>

<div class="form-group row float optional">
  <label class="col-form-label label-col float optional"
         for="flight_calculator_passengers">
    <span>invalid Select Field extended</span>
  </label>
  <div class="input-wrapper wrapper-col wrapper-col-full-width">
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text">
          add
        </span>
      </div>
      <select class="form-control select optional"
              name="flight_calculator[passengers]"
              id="flight_calculator_passengers">
        <option selected="selected" value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
      </select>
      <div class="input-group-append">
        <span class="input-group-text">
          apples
        </span>
      </div>
    </div>
  </div>
</div>

<div class="py-3"></div>

<div class="form-group row select optional small-input form-group-invalid">
  <label class="col-form-label label-col select optional"
         for="flight_calculator_passengers">
    invalid Select Field
  </label>
  <div class="input-wrapper wrapper-col wrapper-col-full-width">
    <select class="form-control select optional is-invalid"
            name="flight_calculator[passengers]"
            id="flight_calculator_passengers">
      <option selected="selected" value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
    </select>
    <div class="invalid-feedback">can't be this number</div>
  </div>
</div>

<div class="py-3"></div>

<div class="form-group row float optional form-group-invalid">
  <label class="col-form-label label-col float optional"
         for="flight_calculator_passengers">
    <span>invalid Select Field extended</span>
  </label>
  <div class="input-wrapper wrapper-col wrapper-col-full-width">
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text">
          add
        </span>
      </div>
      <select class="form-control select optional is-invalid"
              name="flight_calculator[passengers]"
              id="flight_calculator_passengers">
        <option selected="selected" value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
      </select>
      <div class="input-group-append">
        <span class="input-group-text">
          apples
        </span>
      </div>
    </div>
  </div>
  <div class="invalid-feedback col-12">can't be this number</div>
</div>
      

        <h3 class="styleguide-headline">Radio Buttons</h3>

<fieldset class="form-group radio_buttons required">
  <label class="radio_buttons required">
    Radio Buttons
    <abbr title="required">*</abbr>
  </label>
  <div class="form-check">
    <input class="form-check-input radio_buttons required"
           required="required" aria-required="true" type="radio"
           value="val_1" checked="checked"
          name="radio_buttons1" id="radio_buttons1_val_1">
    <label class="form-check-label collection_radio_buttons"
           for="radio_buttons1_val_1">
      option 1
    </label>
  </div>
  <div class="form-check">
    <input class="form-check-input radio_buttons required"
           required="required" aria-required="true" type="radio" value="val_2"
          name="radio_buttons1" id="radio_buttons1_val_2">
    <label class="form-check-label collection_radio_buttons" 
           for="radio_buttons1_val_2">
      option 2
    </label>
  </div>
  <div class="form-check">
    <input class="form-check-input radio_buttons required"
           required="required" aria-required="true" type="radio" value="val_3"
           name="radio_buttons1" id="radio_buttons1_val_3">
    <label class="form-check-label collection_radio_buttons"
            for="radio_buttons1_val_3">
      option 3
    </label>
  </div>
</fieldset>

<div class="py-3"></div>

<fieldset class="form-group radio_buttons required">
  <label class="radio_buttons required">
    Radio Buttons with Hint
    <abbr title="required">*</abbr>
  </label>
  <div class="form-check">
    <input class="form-check-input radio_buttons required"
           required="required" aria-required="true" type="radio"
           value="val_1" checked="checked"
          name="radio_buttons2" id="radio_buttons2_val_1">
    <label class="form-check-label collection_radio_buttons"
           for="radio_buttons2_val_1">
      option 1
    </label>
  </div>
  <div class="form-check">
    <input class="form-check-input radio_buttons required"
           required="required" aria-required="true" type="radio" value="val_2"
          name="radio_buttons2" id="radio_buttons2_val_2">
    <label class="form-check-label collection_radio_buttons" 
           for="radio_buttons2_val_2">
      option 2
    </label>
  </div>
  <div class="form-check">
    <input class="form-check-input radio_buttons required"
           required="required" aria-required="true" type="radio" value="val_3"
           name="radio_buttons2" id="radio_buttons2_val_3">
    <label class="form-check-label collection_radio_buttons"
            for="radio_buttons2_val_3">
      option 3
    </label>
  </div>
  <small class="form-text text-muted">
    this is a hint
  </small>
</fieldset>

<div class="py-3"></div>

<fieldset class="form-group radio_buttons required form-group-invalid">
  <label class="radio_buttons required">
    invalid Radio Buttons
    <abbr title="required">*</abbr>
  </label>
  <div class="form-check">
    <input class="form-check-input is-invalid radio_buttons required"
           required="required" aria-required="true" type="radio"
           value="val_1" checked="checked"
          name="radio_buttons3" id="radio_buttons3_val_1">
    <label class="form-check-label collection_radio_buttons"
           for="radio_buttons3_val_1">
      option 1
    </label>
  </div>
  <div class="form-check">
    <input class="form-check-input is-invalid radio_buttons required"
           required="required" aria-required="true" type="radio" value="val_2"
          name="radio_buttons3" id="radio_buttons3_val_2">
    <label class="form-check-label collection_radio_buttons" 
           for="radio_buttons3_val_2">
      option 2
    </label>
  </div>
  <div class="form-check">
    <input class="form-check-input is-invalid radio_buttons required"
           required="required" aria-required="true" type="radio" value="val_3"
           name="radio_buttons3" id="radio_buttons3_val_3">
    <label class="form-check-label collection_radio_buttons"
            for="radio_buttons3_val_3">
      option 3
    </label>
  </div>
  <div class="invalid-feedback d-block">
    this selection is not allowed
  </div>
</fieldset>

      

        <h3 class="styleguide-headline">Checkboxes</h3>

<h4 class="styleguide-headline">Checkboxes</h4>

<fieldset class="form-group boolean optional">
  <div class="form-check">
    <input name="name_1" type="hidden" value="0">
    <input class="form-check-input boolean optional" type="checkbox" value="1"
           name="name_1" id="name_1">
    <label class="form-check-label boolean optional"
           for="name_1">
      I want to save my details for the next time and create a login account
    </label>
  </div>
</fieldset>

<div class="py-3"></div>

<fieldset class="form-group boolean optional form-group-invalid">
  <div class="form-check">
    <input name="name_2" type="hidden" value="0">
    <input class="form-check-input is-invalid boolean optional" 
           aria-invalid="true" type="checkbox" value="1"
           name="name_2" id="name_2">
    <label class="form-check-label boolean optional"
           for="name_2">
      I want to save my details for the next time and create a login account
    </label>
    <div class="invalid-feedback pl-1 ml-3">You are not allowed to do this</div>
  </div>
</fieldset>

<div class="py-3"></div>
<h4 class="styleguide-headline">Switches</h4>

<fieldset class="form-group boolean optional">
  <div class="custom-control custom-switch">
    <input type="checkbox" name="name_3" id="name_3"
           value="1" class="custom-control-input">
    <label class="custom-control-label boolean optional"
           for="name_3">
      I want to subscribe to monthly news and updates from myclimate
    </label>
  </div>
</fieldset>

<div class="py-3"></div>

<fieldset class="form-group boolean optional form-group-invalid">
  <div class="custom-control custom-switch">
    <input name="name_4" type="hidden" value="0">
    <input class="custom-control-input is-invalid boolean optional"
           aria-invalid="true" type="checkbox" value="1"
           name="name_4"
           id="name_4">
    <label class="custom-control-label boolean optional"
           for="name_4">
      I want to save my details for the next time and create a login account
    </label>
    <div class="invalid-feedback">You are not allowed to do this</div>
  </div>
</fieldset>