University of Leeds Design System v1.0.13

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" action="/example-form-action">

            <div class="uol-form__input-group  uol-form__input-group--block">

            </div>

            <div class="uol-form--button-block">

                <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" aria-label="Select 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" aria-label="Select 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>

            </div>

        </form>

    </div>

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