Types of fields

Library connecting and basic template

Connect library by calling an extension:

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

Basic template

<div class="ui-ctl ui-ctl-textbox"> <!-- 1. Main container -->
	<input type="text" class="ui-ctl-element">  <!-- 2. Main field -->
</div>

1. Main element - class must be assigned to this container that defines field type. This example has .ui-ctl-textbox.
2. Main field - this element properties depend directly on the parent's class.

Textbox and Textarea

Textbox

Standard text field. Basic width 320px.

<!-- .ui-ctl.ui-ctl-textbox > input[type="text"].ui-ctl-element -->
<div class="ui-ctl ui-ctl-textbox">
    <input type="text" class="ui-ctl-element" placeholder="Title">
</div>

Textarea

Basic width 640px.

<!-- .ui-ctl.ui-ctl-textarea > textarea.ui-ctl-element -->
<div class="ui-ctl ui-ctl-textarea">
    <textarea class="ui-ctl-element"></textarea>
</div>

Dropdown

Basic width 320px.

<!-- .ui-ctl.ui-ctl-after-icon.ui-ctl-dropdown > 
    div.ui-ctl-after.ui-ctl-icon-angle + 
    div.ui-ctl-element -->
<div class="ui-ctl ui-ctl-after-icon ui-ctl-dropdown">
    <div class="ui-ctl-after ui-ctl-icon-angle"></div>
    <div class="ui-ctl-element"> Selected option </div>
</div>

<!-- .ui-ctl.ui-ctl-after-icon.ui-ctl-dropdown > 
    div.ui-ctl-after.ui-ctl-icon-angle + 
    select.ui-ctl > option -->
<div class="ui-ctl ui-ctl-after-icon ui-ctl-dropdown">
    <div class="ui-ctl-after ui-ctl-icon-angle"></div>
    <select class="ui-ctl-element">
        <option value="">Опция #1</option>
        <option value="">Опция #2</option>
        <option value="">Опция #3</option>
    </select>
</div>

<!-- .ui-ctl.ui-ctl-after-icon.ui-ctl-dropdown > 
    div.ui-ctl-after.ui-ctl-icon-angle + 
    input[type="text"].ui-ctl-element -->
<div class="ui-ctl ui-ctl-after-icon ui-ctl-dropdown">
    <div class="ui-ctl-after ui-ctl-icon-angle"></div>
    <input type="text" class="ui-ctl-element">
</div>

Date & Time

<!-- .ui-ctl.ui-ctl-after-icon.ui-ctl-datetime > 
    div.ui-ctl-after.ui-ctl-icon-calendar + 
    div.ui-ctl-element -->
<div class="ui-ctl ui-ctl-after-icon ui-ctl-datetime">
    <div class="ui-ctl-after ui-ctl-icon-calendar"></div>
    <div class="ui-ctl-element">14.10.2014 16:33</div>
</div>

<!-- .ui-ctl.ui-ctl-ext-after-icon.ui-ctl-datetime > 
    div.ui-ctl-ext-after.ui-ctl-icon-calendar + 
    div.ui-ctl-element -->
<div class="ui-ctl ui-ctl-ext-after-icon ui-ctl-datetime">
    <div class="ui-ctl-ext-after ui-ctl-icon-calendar"></div>
    <div class="ui-ctl-element">14.10.2014 16:33</div>
</div>

<!-- .ui-ctl.ui-ctl-after-icon.ui-ctl-date > 
    div.ui-ctl-after.ui-ctl-icon-calendar + 
    div.ui-ctl-element -->
<div class="ui-ctl ui-ctl-after-icon ui-ctl-date">
    <div class="ui-ctl-after ui-ctl-icon-calendar"></div>
    <div class="ui-ctl-element">14.10.2014</div>
</div>

<!-- .ui-ctl.ui-ctl-after-icon.ui-ctl-time > 
    div.ui-ctl-after.ui-ctl-icon-clock + 
    div.ui-ctl-element -->
<div class="ui-ctl ui-ctl-after-icon ui-ctl-time">
    <div class="ui-ctl-after ui-ctl-icon-calendar"></div>
   <div class="ui-ctl-element">14:30</div>
</div>

<!-- .ui-ctl.ui-ctl-after-icon.ui-ctl-time > 
    div.ui-ctl-after.ui-ctl-icon-clock + 
    select.ui-ctl-element > n*options-->
<div class="ui-ctl ui-ctl-after-icon ui-ctl-time">
    <div class="ui-ctl-after ui-ctl-icon-calendar"></div>
    <select class="ui-ctl-element">
        <option value="">12:00</option>
        <option value="">15:00</option>
        <option value="">18:00</option>
    </select>
</div>

<!-- .ui-ctl.ui-ctl-after-icon.ui-ctl-time > 
    div.ui-ctl-after.ui-ctl-icon-clock + 
    select.ui-ctl-element > n*options-->
<div class="ui-ctl ui-ctl-after-icon ui-ctl-time">
    <div class="ui-ctl-after ui-ctl-icon-calendar"></div>
   <input type="text" class="ui-ctl-element" value="14:33">
</div>

MultiSelect

List with standard select with attribute multiple.

<!-- .ui-ctl.ui-ctl-multiple-select > select.ui-ctl[multiple][size="n"] > n*option-->
<div class="ui-ctl ui-ctl-multiple-select">
    <select class="ui-ctl-element" multiple size="3">
            <option value="">Option #1</option>
            <option value="">Option #2</option>
            <option value="">Option #3442</option>
            <option value="">Option #5434</option>
            <option value="">Option #6433</option>
        </select>
</div>

Resize

When there are assigned no resize modifiers, the field can be resized in all directions.

Attention! Resized properties are not supported in any versions of IE.

Modifier .ui-ctl-no-resize. Prohibits field size updates.

<!-- .ui-ctl.ui-ctl-textarea.ui-ctl-no-resize > textarea.ui-ctl-element -->
<div class="ui-ctl ui-ctl-textarea ui-ctl-no-resize">
    <textarea class="ui-ctl-element"></textarea>
</div>

Modifier .ui-ctl-resize-y. Permits resize only vertically.

<!-- .ui-ctl.ui-ctl-textarea.ui-ctl-resize-y > textarea.ui-ctl-element -->
<div class="ui-ctl  ui-ctl-textarea ui-ctl-resize-y">
    <textarea class="ui-ctl-element"></textarea>
</div>

Modifier .ui-ctl-resize-x. Permits resize only horizontally.

<!-- .ui-ctl.ui-ctl-textarea.ui-ctl-resize-x > textarea.ui-ctl-element -->
<div class="ui-ctl  ui-ctl-textarea ui-ctl-resize-x">
    <textarea class="ui-ctl-element"></textarea>
</div>

These classes are applicable only for textarea.

Checkbox and Radio

Checkbox

Basic width label equals 320px.

<!-- label.ui-ctl.ui-ctl-checkbox > input[type="checkbox"].ui-ctl-element + .ui-ctl-label-text -->
<label class="ui-ctl ui-ctl-checkbox">
    <input type="checkbox" class="ui-ctl-element">
    <div class="ui-ctl-label-text">:Information about discounts and promotions</div>
</label>

Radio

Basic width label equals 320px.

<!-- label.ui-ctl.ui-ctl-radio > input[type="radio"].ui-ctl-element + .ui-ctl-label-text -->
<label class="ui-ctl ui-ctl-radio">
    <input type="radio" class="ui-ctl-element">
    <div class="ui-ctl-label-text">Get information about discounts and promotions</div>
</label>

File

File Link

<!-- label.ui-ctl.ui-ctl-file-link > input[type="file"].ui-ctl-element + .ui-ctl-label-text -->
<label class="ui-ctl ui-ctl-file-link">
    <input type="file" class="ui-ctl-element">
    <div class="ui-ctl-label-text">Add photo</div>
</label>

File Button

<!-- label.ui-ctl.ui-ctl-file-btn > input[type="file"].ui-ctl-element + .ui-ctl-label-text -->
<label class="ui-ctl ui-ctl-file-btn">
    <input type="file" class="ui-ctl-element">
    <div class="ui-ctl-label-text">Add photo</div>
</label>

File Drag'n'Drop

<!-- label.ui-ctl.ui-ctl-file-drop > input[type="file"].ui-ctl-element + .ui-ctl-label-text > span + small -->
<label class="ui-ctl ui-ctl-file-drop">
    <div class="ui-ctl-label-text">
        <span> Upload file or image</span>
        <small>Move using drag'n'drop</small>
    </div>
    <input type="file" class="ui-ctl-element">
</label>