Общее

Подключение и базовый шаблон

Подключается библиотека вызывом расширения:

\Bitrix\Main\UI\Extension::load("ui.forms");

Базовый шаблон

<div class="ui-ctl ui-ctl-textbox ui-ctl-before-icon ui-ctl-after-icon"> <!-- 1. Основной контейнер -->
	<div class="ui-ctl-before ui-ctl-icon-search"></div> <!-- 3. Дополнительный элемент (опционально)-->
	<button class="ui-ctl-after ui-ctl-icon-clear"></button> <!-- 3. Дополнительный элемент (опционально)-->
		<input type="text" class="ui-ctl-element"> <!-- 2. Основное поле -->
</div>

Основной элемент - обязательный элемент. Имеет базовый класс .ui-ctl который определяет базовые свойства всего контрола. Именно на этот элемент навешиваются все классы-модификаторы.
Основное поле - обязательный элемент. Непосредственно сам контрол. Всегда имеет один класс .ui-ctl-element, но может быть разным тегом (<input>, <select>, <textarea> или <div>).
Дополнительные элементы - опциональные элементы. Предназначены для отображения иконок внутри поля. Их может быть не более 2-х, но обязательно с разными классами. Подробнее об этих элементах.

Если есть необходимость кастомизировать поля по своему макету, используйте собственный класс модификатор на .ui-ctl.

Внимание! Переопределять стили без кастомного класса строго запрещено!

По умолчанию поля имеют базовую высоту в 39px и ширину 320px. В некоторых полях эти значения могут отличаться. Подробнее об этом можно узнать в описании конкретного поля.

Размеры и форма

inline-flex / flex

Одним из дефолтных свойств .ui-ctl является display: flex. Вследствие этого, поле работает как блочный элемент, но растягивается на базовую ширину своего типа. Ширину можно переопределять и сбрасывать. Подробнее об этом тут.

Модификатор .ui-ctl-inline - меняет свойство display на inline-flex, что схоже по свойствам с display: inline-block, т.е. поле начинает вести себя как блочно-строчный элемент.

Модификатор Код

Модификатор	Код
Модификатор `.ui-ctl-inline`	<!-- .ui-ctl.ui-ctl-textbox.ui-ctl-inline > input.ui-ctl-element --> <div class="ui-ctl ui-ctl-textbox ui-ctl-inline"> <input type="text" class="ui-ctl-element"> </div>
Если есть необходимость изменить свойства в обратном направлении, можно использовать модификатор `.ui-ctl-block`.
Модификатор `.ui-ctl-block`	<!-- .ui-ctl.ui-ctl-textbox.ui-ctl-block > input.ui-ctl-element --> <div class="ui-ctl ui-ctl-textbox ui-ctl-block"> <input type="text" class="ui-ctl-element"> </div>

Модификатор .ui-ctl-inline

<!-- .ui-ctl.ui-ctl-textbox.ui-ctl-inline > input.ui-ctl-element -->
<div class="ui-ctl ui-ctl-textbox ui-ctl-inline">
	<input type="text" class="ui-ctl-element">
</div>

Если есть необходимость изменить свойства в обратном направлении, можно использовать модификатор .ui-ctl-block.

Модификатор .ui-ctl-block

<!-- .ui-ctl.ui-ctl-textbox.ui-ctl-block > input.ui-ctl-element -->
<div class="ui-ctl ui-ctl-textbox ui-ctl-block">
	<input type="text" class="ui-ctl-element">
</div>

Ширина полей

Модификаторы ширины переопределяют базовые значения.

Модификатор	Код
Модификатор `.ui-ctl-w25` - устанавливает ширину в 25%.	<!-- .ui-ctl.ui-ctl-textbox.ui-ctl-w25 > input.ui-ctl-element --> <div class="ui-ctl ui-ctl-textbox ui-ctl-w25"> <input type="text" class="ui-ctl-element">
Модификатор `.ui-ctl-w33` - устанавливает ширину в 33%.	<!-- .ui-ctl.ui-ctl-textbox.ui-ctl-w33 > input.ui-ctl-element --> <div class="ui-ctl ui-ctl-textbox ui-ctl-w33"> <input type="text" class="ui-ctl-element">
Модификатор `.ui-ctl-w50` - устанавливает ширину в 50%.	<!-- .ui-ctl.ui-ctl-textbox.ui-ctl-w50 > input.ui-ctl-element --> <div class="ui-ctl ui-ctl-textbox ui-ctl-w50"> <input type="text" class="ui-ctl-element">
Модификатор `.ui-ctl-w75` - устанавливает ширину в 75%.	<!-- .ui-ctl.ui-ctl-textbox.ui-ctl-w75 > input.ui-ctl-element --> <div class="ui-ctl ui-ctl-textbox ui-ctl-w75"> <input type="text" class="ui-ctl-element">
Модификатор `.ui-ctl-w100` - устанавливает ширину в 100%.	<!-- .ui-ctl.ui-ctl-textbox.ui-ctl-w100 > input.ui-ctl-element --> <div class="ui-ctl ui-ctl-textbox ui-ctl-w100"> <input type="text" class="ui-ctl-element">
Модификатор `.ui-ctl-wa` - выставляет свойство `width: auto`.	<!-- .ui-ctl.ui-ctl-textbox.ui-ctl-wa > input.ui-ctl-element --> <div class="ui-ctl ui-ctl-textbox ui-ctl-wa"> <input type="text" class="ui-ctl-element">
Модификатор `.ui-ctl-wd` - сбрасывает ширину на дефолтное значение определенного типа.	<!-- .ui-ctl.ui-ctl-textbox.ui-ctl-wd > input.ui-ctl-element --> <div class="ui-ctl ui-ctl-textbox ui-ctl-wd"> <input type="text" class="ui-ctl-element">

Высота полей

Модификатор	Код
Модификатор `.ui-ctl-lg` - устанавливает высоту строки в 47px.	<!-- .ui-ctl.ui-ctl-textbox.ui-ctl-lg > input.ui-ctl-element --> <div class="ui-ctl ui-ctl-textbox ui-ctl-lg"> <input type="text" class="ui-ctl-element">
Модификатор `.ui-ctl-md` - устанавливает высоту строки в 39px.	<!-- .ui-ctl.ui-ctl-textbox.ui-ctl-md > input.ui-ctl-element --> <div class="ui-ctl ui-ctl-textbox ui-ctl-md"> <input type="text" class="ui-ctl-element">
Модификатор `.ui-ctl-sm` - устанавливает высоту строки в 33px.	<!-- .ui-ctl.ui-ctl-textbox.ui-ctl-sm > input.ui-ctl-element --> <div class="ui-ctl ui-ctl-textbox ui-ctl-sm"> <input type="text" class="ui-ctl-element">
Модификатор `.ui-ctl-xs` - устанавливает высоту строки в 26px.	<!-- .ui-ctl.ui-ctl-textbox.ui-ctl-xs > input.ui-ctl-element --> <div class="ui-ctl ui-ctl-textbox ui-ctl-xs"> <input type="text" class="ui-ctl-element">

Цвет

Модификатор	Код
Модификаторы `.ui-ctl-active`, `.ui-ctl-hover.`.	<!-- .ui-ctl.ui-ctl-textbox.ui-ctl-active > input.ui-ctl-element --> <div class="ui-ctl ui-ctl-textbox ui-ctl-active"> <input type="text" class="ui-ctl-element">
Модификатор `.ui-ctl-success`.	<!-- .ui-ctl.ui-ctl-textbox.ui-ctl-success > input.ui-ctl-element --> <div class="ui-ctl ui-ctl-textbox ui-ctl-success"> <input type="text" class="ui-ctl-element">
Модификатор `.ui-ctl-warning`.	<!-- .ui-ctl.ui-ctl-textbox.ui-ctl-warning > input.ui-ctl-element --> <div class="ui-ctl ui-ctl-textbox ui-ctl-warning"> <input type="text" class="ui-ctl-element">
Модификатор `.ui-ctl-danger`.	<!-- .ui-ctl.ui-ctl-textbox.ui-ctl-danger > input.ui-ctl-element --> <div class="ui-ctl ui-ctl-textbox ui-ctl-danger"> <input type="text" class="ui-ctl-element">
Модификатор `.ui-ctl-disabled`.	<!-- .ui-ctl.ui-ctl-textbox.ui-ctl-disabled > input.ui-ctl-element --> <div class="ui-ctl ui-ctl-textbox ui-ctl-disabled"> <input type="text" class="ui-ctl-element"> <!-- .ui-ctl-container > input.ui-ctl-element[disabled] --> <div class="ui-ctl ui-ctl-textbox"> <input type="text" class="ui-ctl-element" disabled> </div>
Модификатор меняет только оформление поля. Для того, чтобы заблокировать возможность ввода данных, добавьте к `.ui-element` атрибут `disabled`. Атрибут самодостаточен, и его можно использовать без класса, внешний вид поля тоже изменится..

Модификатор	Код
Элемент `.ui-ctl-tag`. новый	<!-- .ui-ctl.ui-ctl-textbox > .ui-ctl-tag{text} + input.ui-ctl-element --> <div class="ui-ctl ui-ctl-textbox"> <div class="ui-ctl-tag">новый</div> <input type="text" class="ui-ctl-element"> </div>
Модификатор `.ui-ctl-tag-success` для `.ui-ctl-tag`. новый	<!-- .ui-ctl.ui-ctl-textbox > .ui-ctl-tag-success{text} + input.ui-ctl-element --> <div class="ui-ctl ui-ctl-textbox"> <div class="ui-ctl-tag-success">новый</div> <input type="text" class="ui-ctl-element"> </div>
Модификатор `.ui-ctl-tag-primary` для `.ui-ctl-tag`. новый	<!-- .ui-ctl.ui-ctl-textbox > .ui-ctl-tag-primary{text} + input.ui-ctl-element --> <div class="ui-ctl ui-ctl-textbox"> <div class="ui-ctl-tag-primary">новый</div> <input type="text" class="ui-ctl-element"> </div>
Модификатор `.ui-ctl-tag-danger` для `.ui-ctl-tag`. новый	<!-- .ui-ctl.ui-ctl-textbox > .ui-ctl-tag-danger{text} + input.ui-ctl-element --> <div class="ui-ctl ui-ctl-textbox"> <div class="ui-ctl-tag-danger">новый</div> <input type="text" class="ui-ctl-element"> </div>
Модификатор `.ui-ctl-tag-warning` для `.ui-ctl-tag`. новый	<!-- .ui-ctl.ui-ctl-textbox > .ui-ctl-tag-warning{text} + input.ui-ctl-element --> <div class="ui-ctl ui-ctl-textbox"> <div class="ui-ctl-tag-warning">новый</div> <input type="text" class="ui-ctl-element"> </div>

Дополнительные свойства полей

Модификатор	Код
Модификатор `.ui-ctl-no-border` убирает границы.	<!-- .ui-ctl.ui-ctl-textbox.ui-ctl-no-border > input.ui-ctl-element --> <div class="ui-ctl ui-ctl-textbox ui-ctl-no-border"> <input type="text" class="ui-ctl-element"> </div>
Модификатор `.ui-ctl-underline` убирает все границы, за исключением нижней.	<!-- .ui-ctl.ui-ctl-textbox.ui-ctl-underline > input.ui-ctl-element --> <div class="ui-ctl ui-ctl-textbox ui-ctl-underline"> <input type="text" class="ui-ctl-element"> </div>
Модификатор `.ui-ctl-no-padding` убирает `padding` в самом поле.	<!-- .ui-ctl.ui-ctl-textbox.ui-ctl-no-padding > input.ui-ctl-element --> <div class="ui-ctl ui-ctl-textbox ui-ctl-no-padding"> <input type="text" class="ui-ctl-element"> </div>
Модификатор `.ui-ctl-round` закругляет углы.	<!-- .ui-ctl.ui-ctl-textbox.ui-ctl-round > input.ui-ctl-element --> <div class="ui-ctl ui-ctl-textbox ui-ctl-round"> <input type="text" class="ui-ctl-element"> </div>