University of Leeds Design System v1.0.13

Form: Search with single typeahead

No notes defined.

{% extends '@uol-form' %}
 
<div class="uol-form__container uol-form-container--centered  ">

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

        <h2 class="uol-form__title">Search form</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-inline">

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

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

                        <label class="uol-form__input-label" for="cheeseList" id="cheeseList-label">
                            <span class="uol-form__input-label__text">Cheese list</span>

                            <span class="uol-form__input-label__hint" id="cheeseList-hint">Select cheese </span>

                        </label>

                        <div class="uol-form__input-wrapper uol-form__input-wrapper--search uol-form__input-wrapper--with-icon uol-form__input-wrapper--search-typeahead" data-field-invalid=false>
                            <select class="uol-form__input uol-form__input--select " name="selectName1" id="cheeseList" aria-label="Select Cheese list">

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

                                <option value="BRI">Brie</option>

                                <option value="CBL">Cashel Blue</option>

                                <option value="CHE">Cheddar</option>

                                <option value="CYA">Cornish Yarg</option>

                                <option value="EDA">Edam</option>

                                <option value="MAN">Manchego</option>

                                <option value="PRE">Parmigiano-Reggiano</option>

                                <option value="SBL">Shropshire Blue</option>

                                <option value="STI">Stilton</option>

                                <option value="SBI">Stinking Bishop</option>

                                <option value="WEN">Wensleydale</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--primary
    " type="submit">Search</button>

                </div>

            </div>

        </form>

        <div class="uol-rich-text">
            <div class="uol-form__additional-content uol-form__additional-content--after">
                <p>Or view the <a href="https://www.leeds.ac.uk/forstaff/homepage/375/services">list of service websites</a>.</p>
            </div>
        </div>

    </div>

</div>
 
{
  "form": {
    "heading_level": "h2",
    "form_centered": true,
    "action": "/example-form-action",
    "title": "Search form",
    "lead": null,
    "additional_info_before": null,
    "button": {
      "style": "primary",
      "type": "submit",
      "content": "Search"
    },
    "fields": [
      {
        "id": "cheeseList",
        "name": "selectName1",
        "label": "Cheese list",
        "type": "select",
        "search_icon": true,
        "hint": "Select cheese",
        "has_icon": true,
        "options": [
          {
            "label": "Brie",
            "value": "BRI"
          },
          {
            "label": "Cashel Blue",
            "value": "CBL"
          },
          {
            "label": "Cheddar",
            "value": "CHE"
          },
          {
            "label": "Cornish Yarg",
            "value": "CYA"
          },
          {
            "label": "Edam",
            "value": "EDA"
          },
          {
            "label": "Manchego",
            "value": "MAN"
          },
          {
            "label": "Parmigiano-Reggiano",
            "value": "PRE"
          },
          {
            "label": "Shropshire Blue",
            "value": "SBL"
          },
          {
            "label": "Stilton",
            "value": "STI"
          },
          {
            "label": "Stinking Bishop",
            "value": "SBI"
          },
          {
            "label": "Wensleydale",
            "value": "WEN"
          }
        ]
      }
    ],
    "button_inline": true,
    "additional_info_after": "<p>Or view the <a href=\"https://www.leeds.ac.uk/forstaff/homepage/375/services\">list of service websites</a>.</p>"
  }
}