Foehn Design System

Filter List Form 

<form class="mb-3">
    <legend>Rechercher une institution</legend>
    <div class="row">
        <div class="col-md-6">
            <div class="form-group">
                <label for="name">Nom</label>

                <input class="form-control" type="text" id="name" name="testInput" value="" required aria-required="true">
            </div>

        </div>
        <div class="col-md-6">
            <div class="form-group">
                <label for="exampleSelect1">Clientèle</label>
                <select class="form-control" id="cutomer">
                    <option>Curabitur</option>
                    <option>Maecenas vel</option>
                    <option>Suspendisse maximus velit non lacus</option>
                    <option>Sed maximus gohjyt</option>
                    <option>Aliquam cupiditate, vel!</option>
                    <option>Nunc eget neque sit amet ipsum auctor laoreet</option>
                </select>
            </div>

        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="form-group">
                <label for="exampleSelect1">Région</label>
                <select class="form-control" id="region">
                    <option>Curabitur</option>
                    <option>Maecenas vel</option>
                    <option>Suspendisse maximus velit non lacus</option>
                    <option>Sed maximus gohjyt</option>
                    <option>Aliquam cupiditate, vel!</option>
                    <option>Nunc eget neque sit amet ipsum auctor laoreet</option>
                </select>
            </div>

        </div>
        <div class="col-md-6">
            <div class="form-group">
                <label for="exampleSelect1">Degré</label>
                <select class="form-control" id="degree">
                    <option>Curabitur</option>
                    <option>Maecenas vel</option>
                    <option>Suspendisse maximus velit non lacus</option>
                    <option>Sed maximus gohjyt</option>
                    <option>Aliquam cupiditate, vel!</option>
                    <option>Nunc eget neque sit amet ipsum auctor laoreet</option>
                </select>
            </div>

        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="form-group">
                <label for="exampleSelect1">Situation</label>
                <select class="form-control" id="situation">
                    <option>Curabitur</option>
                    <option>Maecenas vel</option>
                    <option>Suspendisse maximus velit non lacus</option>
                    <option>Sed maximus gohjyt</option>
                    <option>Aliquam cupiditate, vel!</option>
                    <option>Nunc eget neque sit amet ipsum auctor laoreet</option>
                </select>
            </div>

        </div>
        <div class="col-md-6">
            <div class="form-group">
                <label for="exampleSelect1">Situation</label>
                <select class="form-control" id="situation">
                    <option>Curabitur</option>
                    <option>Maecenas vel</option>
                    <option>Suspendisse maximus velit non lacus</option>
                    <option>Sed maximus gohjyt</option>
                    <option>Aliquam cupiditate, vel!</option>
                    <option>Nunc eget neque sit amet ipsum auctor laoreet</option>
                </select>
            </div>

        </div>
    </div>
    <a href="#" title="Rechercher link to somewhere" class="btn btn-dark">Rechercher</a>

    <a href="#" title="Annuler link to somewhere" class="btn btn-secondary">Annuler</a>

</form>
 
<form class="mb-3">
  <legend>Rechercher une institution</legend>
  <div class="row">
    <div class="col-md-6">
      {% render '@input--default', {label: "Nom", id: "name"}, true %}
    </div>
    <div class="col-md-6">
      {% render '@select--default', {label: "Clientèle", id: "cutomer"}, true %}
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      {% render '@select--default', {label: "Région", id: "region"}, true %}
    </div>
    <div class="col-md-6">
      {% render '@select--default', {label: "Degré", id: "degree"}, true %}
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      {% render '@select--default', {label: "Situation", id: "situation"}, true %}
    </div>
    <div class="col-md-6">
      {% render '@select--default', {label: "Situation", id: "situation"}, true %}
    </div>
  </div>
  {% render '@button--default', {text: "Rechercher"}, true %}
  {% render '@button--secondary', {text: "Annuler"}, true %}
</form>
 
/* No context defined. */

No notes defined.