v5 Form items

Standard

Checkbox

Expanding input

Switch

Range slider

Text input

Please enter your first name as it appears on official documents, such as your passport, birth certificate, or driving licence.

Email

Select

Please select which country you were born in.

Address

Address:

Form pair

Container with actions

Module / Unit 1
Module / Unit 2

Filter buttons

Muted

Checkbox

Chic

Search for Courses

Filters bar

Solid

Search

Minimal

Select: inline, compact, icon

Select: inline, compact, icon

These two select elements have been set to resize on load and on change, using UCASDesignFramework.size.resizeElementToContentWidth().

This function takes two arguments: the select element itself and an optional amount of extra padding, in pixels, to be added to the width, to account for things like icons or padding within the select.


var selectElements = document.querySelectorAll('#select-inline-compact-icon select')
selectElements.forEach(function (selectElement) {
  UCASDesignFramework.size.resizeElementToContentWidth(selectElement, 32)
  selectElement.addEventListener('change', function () {
    UCASDesignFramework.size.resizeElementToContentWidth(selectElement, 32)
  })
})

Exisiting search filters (inverse)

Search filters

Filter buttons

Expanding input