University of Leeds Design System v1.0.13

Form: Radio buttons with search

No notes defined.

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

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

        <form class="uol-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 
">

                        <div role="radiogroup" aria-labelledby="randomId10" class="uol-form__custom-fieldset">

                            <span id="randomId10" class="uol-form__custom__legend">Label</span>

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

                                <div class="uol-form__input--radio-wrapper">
                                    <input class="uol-form__input--radio" type="radio" id="radio-1" name="search-by" value="Option 1">
                                    <label class="uol-form__input--radio__label" for="radio-1">Option 1</label>
                                    <span class="uol-form__input--custom-radio" hidden>
                                        <svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" aria-hidden="true" focusable="false">
                                            <circle cx="12" cy="12" r="12" />
                                        </svg>
                                    </span>
                                </div>

                                <div class="uol-form__input--radio-wrapper">
                                    <input class="uol-form__input--radio" type="radio" id="radio-2" name="search-by" value="Option 2">
                                    <label class="uol-form__input--radio__label" for="radio-2">Option 2</label>
                                    <span class="uol-form__input--custom-radio" hidden>
                                        <svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" aria-hidden="true" focusable="false">
                                            <circle cx="12" cy="12" r="12" />
                                        </svg>
                                    </span>
                                </div>

                                <div class="uol-form__input--radio-wrapper">
                                    <input class="uol-form__input--radio" type="radio" id="radio-3" name="search-by" value="Option 3">
                                    <label class="uol-form__input--radio__label" for="radio-3">Option 3</label>
                                    <span class="uol-form__input--custom-radio" hidden>
                                        <svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" aria-hidden="true" focusable="false">
                                            <circle cx="12" cy="12" r="12" />
                                        </svg>
                                    </span>
                                </div>

                                <div class="uol-form__input--radio-wrapper">
                                    <input class="uol-form__input--radio" type="radio" id="radio-4" name="search-by" value="Option 4">
                                    <label class="uol-form__input--radio__label" for="radio-4">Option 4</label>
                                    <span class="uol-form__input--custom-radio" hidden>
                                        <svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" aria-hidden="true" focusable="false">
                                            <circle cx="12" cy="12" r="12" />
                                        </svg>
                                    </span>
                                </div>

                                <div class="uol-form__input--radio-wrapper">
                                    <input class="uol-form__input--radio" type="radio" id="radio-5" name="search-by" value="Option 5">
                                    <label class="uol-form__input--radio__label" for="radio-5">Option 5</label>
                                    <span class="uol-form__input--custom-radio" hidden>
                                        <svg xmlns="http://www.w3.org/2000/svg" height="24px" width="24px" aria-hidden="true" focusable="false">
                                            <circle cx="12" cy="12" r="12" />
                                        </svg>
                                    </span>
                                </div>

                            </div>

                        </div>

                    </div>

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

                        <label class="uol-form__input-label" for="standardSearchId1">
                            <span class="uol-form__input-label__text">Search by subject, course title or keyword</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="standardSearchId1" name="searchCourses1" value="" autocomplete="off">

                            <!--  -->
                        </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 <a href="https://www.leeds.ac.uk/forstaff/homepage/375/services">link to other site</a>.</p>
            </div>
        </div>

    </div>

</div>
 
{
  "form": {
    "heading_level": "h1",
    "form_centered": true,
    "action": "/",
    "title": null,
    "lead": null,
    "additional_info_before": null,
    "button": {
      "style": "primary",
      "type": "submit",
      "content": "Search"
    },
    "fields": [
      {
        "type": "radio",
        "heading_level": "h2",
        "legend": "Label",
        "group_label_id": "randomId10",
        "group_inline": true,
        "options": [
          {
            "id": "radio-1",
            "name": "search-by",
            "value": "Option 1",
            "label": "Option 1"
          },
          {
            "id": "radio-2",
            "name": "search-by",
            "value": "Option 2",
            "label": "Option 2"
          },
          {
            "id": "radio-3",
            "name": "search-by",
            "value": "Option 3",
            "label": "Option 3"
          },
          {
            "id": "radio-4",
            "name": "search-by",
            "value": "Option 4",
            "label": "Option 4"
          },
          {
            "id": "radio-5",
            "name": "search-by",
            "value": "Option 5",
            "label": "Option 5"
          }
        ]
      },
      {
        "type": "search",
        "id": "standardSearchId1",
        "name": "searchCourses1",
        "label": "Search by subject, course title or keyword",
        "aria-invalid": "false",
        "autocomplete": "off",
        "has_icon": true,
        "swapInputs": true
      }
    ],
    "button_inline": true,
    "additional_info_after": "<p>Or <a href=\"https://www.leeds.ac.uk/forstaff/homepage/375/services\">link to other site</a>.</p>"
  }
}