University of Leeds Design System v1.0.15

Form widget: Search

No notes defined.

{% extends '@uol-widget' %}

{% block widget_content %}
  {% render '@uol-form-pattern', { form: form } %}
{% endblock %}
 
<div class="uol-widget-container uol-widget-container__">
    <div class="uol-widget">

        <div class="uol-widget__content">

            <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" role=search>

                        <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="inputId2">
                                        <span class="uol-form__input-label__text">Search by keyword (required)</span>

                                    </label>

                                    <div class="uol-form__input-wrapper
               uol-form__input-wrapper--search
               uol-form__input-wrapper--with-icon " data-field-invalid=false>

                                        <!--  -->

                                        <input class="uol-form__input  uol-form__input--search" type="search" id="inputId2" name="searchCourses2" aria-invalid="false" value="" autocomplete="off" required>

                                        <!--  -->
                                    </div>

                                </div>

                            </div>

                            <div class="uol-form__button-wrapper">
                                <button class="uol-button uol-button--primary
    " type="submit">Search</button>

                            </div>

                        </div>

                    </form>

                </div>

            </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": {
      "content": "Search",
      "type": "submit",
      "style": "primary"
    },
    "fields": [
      {
        "type": "search",
        "id": "inputId2",
        "name": "searchCourses2",
        "label": "Search by keyword",
        "invalid": "false",
        "required": true,
        "autocomplete": "off",
        "has_icon": true
      }
    ],
    "button_inline": true
  }
}