University of Leeds Design System v1.0.12

My Matches form

No notes defined.

{% extends '@uol-form' %}

{% block formContent %}

  {% render '@uol-form-input', {
    'id': 'gender',
    'name': 'gender',
    'label': 'Gender',
    'type': 'select',
    'options': [
      {
        'value': 'prefer-not',
        'label': 'Prefer not to say'
      },
      {
        'value': 'female',
        'label': 'Female'
      },
      {
        'value': 'female',
        'label': 'Male'
      },
      {
        'value': 'other',
        'label': 'Other'
      }
    ]
  } %}

  {% render '@uol-form-input', {
    'type': 'select',
    'label': 'Language exchange duration',
    'id': 'language-exchange-duration',
    'name': 'language-exchange-duration',
    'options': [
      {
        'id': 'semesterOneOnly',
        'name': 'language-exchange-duration',
        'value': 'semesterOneOnly',
        'label': 'Semester one only'
      },
      {
        'id': 'fullAcademicYear',
        'name': 'language-exchange-duration',
        'value': 'fullAcademicYear',
        'label': 'Full academic year'
      }
      ]
  } %}


{% endblock%}
 
<div class="uol-form__container  ">

    <div class="uol-form__inner-wrapper">

        <h2 class="uol-form__title">Filters</h2>

        <form class="uol-form uol-form--button-block" action="/example-form-action">

            <div class="uol-form__inputs-wrapper">

                <div class="uol-form__input-container 
">

                    <label class="uol-form__input-label" for="gender" id="gender-label">
                        <span class="uol-form__input-label__text">Gender</span>

                    </label>

                    <div class="uol-form__input-wrapper" data-field-invalid=false>
                        <select class="uol-form__input uol-form__input--select" name="gender" id="gender">

                            <option value="">Select an option</option>

                            <option value="prefer-not">Prefer not to say</option>

                            <option value="female">Female</option>

                            <option value="female">Male</option>

                            <option value="other">Other</option>

                        </select>
                        <svg class="uol-form__input__chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" focusable="false" aria-hidden="true">
                            <path fill="none" d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" />
                        </svg>
                    </div>

                </div>

                <div class="uol-form__input-container 
">

                    <label class="uol-form__input-label" for="language-exchange-duration" id="language-exchange-duration-label">
                        <span class="uol-form__input-label__text">Language exchange duration</span>

                    </label>

                    <div class="uol-form__input-wrapper" data-field-invalid=false>
                        <select class="uol-form__input uol-form__input--select" name="language-exchange-duration" id="language-exchange-duration">

                            <option value="">Select an option</option>

                            <option value="semesterOneOnly">Semester one only</option>

                            <option value="fullAcademicYear">Full academic year</option>

                        </select>
                        <svg class="uol-form__input__chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" focusable="false" aria-hidden="true">
                            <path fill="none" d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" />
                        </svg>
                    </div>

                </div>

            </div>

            <div class="uol-form__button-wrapper">
                <button class="uol-button uol-button--secondary
    " type="submit">Filter</button>

            </div>

        </form>

    </div>

</div>
 
{
  "form": {
    "action": "/example-form-action",
    "heading_level": "h2",
    "title": "Filters",
    "button": {
      "style": "secondary",
      "type": "submit",
      "content": "Filter"
    }
  }
}