Формы Официальная документация

Copied!

Обзор

<div class="form-group">
	<label class="control-label">Text</label>
	<input type="text" class="form-control">
</div><!-- .form-group -->

<div class="form-group">
	<label class="control-label">Email</label>
	<input type="email" class="form-control">
</div><!-- .form-group -->

<div class="form-group">
	<label class="control-label">Number</label>
	<input type="number" class="form-control">
</div><!-- .form-group -->

<div class="form-group">
	<label class="control-label">Tel</label>
	<input type="tel" class="form-control">
</div><!-- .form-group -->

<div class="form-group">
	<label class="control-label">Password</label>
	<input type="password" class="form-control">
</div><!-- .form-group -->

<div class="form-group">
	<label class="control-label">Disabled</label>
	<input type="text" class="form-control" disabled>
</div><!-- .form-group -->

<div class="form-group">
	<label class="control-label">Select</label>
	<select class="form-control">
		<option>Option One</option>
		<option>Option Two</option>
		<option>Option Three</option>
		<option>Option Four</option>
		<option>Option Five</option>
		<option>Option Six</option>
	</select>
</div><!-- .form-group -->

<div class="form-group">
	<label class="control-label">Multiselect</label>
	<select class="form-control" multiple size="5">
		<option selected>Default</option>
		<option>Option one</option>
		<option selected>Option two</option>
		<option selected>Option three</option>
		<option>Option four</option>
		<option>Option five</option>
		<option>Option six</option>
	</select>
</div><!-- .form-group -->

<div class="form-group">
	<label class="control-label">Textarea</label>
	<textarea class="form-control" rows="4"></textarea>
</div><!-- .form-group -->

<div class="form-group">
	<label class="control-label">Разделитель</label>
	<div class="form-separator"></div>
</div><!-- .form-group -->

Размеры

.form-control .form-control-regular .form-control-short

<input type="text" class="form-control">
<input type="text" class="form-control form-control-regular">
<input type="text" class="form-control form-control-short">

Чекбоксы и кнопки «радио»

<div class="form-group">
	<label class="form-control-checkbox">
		<input type="checkbox" name="">
		<span></span>Single checkbox
	</label>
</div><!-- .form-group -->

<div class="form-group">
	<div class="checkbox">
		<label class="form-control-checkbox">
			<input type="checkbox" name="" checked>
			<span></span>Multiple checkbox
		</label>
	</div><!-- .checkbox -->
	<div class="checkbox">
		<label class="form-control-checkbox">
			<input type="checkbox" name="">
			<span></span>Multiple checkbox
		</label>
	</div><!-- .checkbox -->
	<div class="checkbox">
		<label class="form-control-checkbox">
			<input type="checkbox" name="">
			<span></span>Multiple checkbox
		</label>
	</div><!-- .checkbox -->
</div><!-- .form-group -->

<div class="form-group">
	<div class="checkbox">
		<label class="form-control-checkbox">
			<input type="checkbox" name="">
			<span></span>Inline checkbox
		</label>
		<label class="form-control-checkbox">
			<input type="checkbox" name="">
			<span></span>Inline checkbox
		</label>
		<label class="form-control-checkbox">
			<input type="checkbox" name="">
			<span></span>Inline checkbox
		</label>
	</div><!-- .checkbox -->
</div><!-- .form-group -->

<div class="form-group">
	<div class="radio">
		<label class="form-control-radio">
			<input type="radio" name="radio" checked="">
			<span>Radio one</span>
		</label>
	</div>
	<div class="radio">
		<label class="form-control-radio">
			<input type="radio" name="radio">
			<span>Radio two</span>
		</label>
	</div>
</div><!-- .form-group -->

<div class="form-group">
	<div class="radio">
		<label class="form-control-radio">
			<input type="radio" name="radio-inline" checked="">
			<span>Radio one</span>
		</label>
		<label class="form-control-radio">
			<input type="radio" name="radio-inline">
			<span>Radio two</span>
		</label>
	</div>
</div><!-- .form-group -->

Тумблер


<div class="form-group">
	<label class="control-label">Включенный и выключенный</label><br>

	<span class="form-control-switch item-toggle">
		<input type="checkbox" value="on">
		<span class="switch-track"></span>
		<span class="switch-thumb"></span>
	</span><!-- .item-toggle -->

	<span class="form-control-switch item-toggle">
		<input type="checkbox" value="on" checked="">
		<span class="switch-track"></span>
		<span class="switch-thumb"></span>
	</span><!-- .item-toggle -->

</div><!-- .form-group -->

<div class="form-group form-group-justified">

	<label class="control-label" for="control-switch">Label for switch control</label>

	<span class="form-control-switch item-toggle">
		<input type="checkbox" value="on" checked="" id="control-switch">
		<span class="switch-track"></span>
		<span class="switch-thumb"></span>
	</span><!-- .item-toggle -->

</div><!-- .form-group -->

Дата и время

Поля дата и время использует классы .form-control-datepicker и .form-control-timepicker

<div class="form-group">
	<label class="control-label">Дата:</label>
	<input type="text" class="form-control form-control-datepicker" value="06.08.2026">
</div><!-- .form-group -->

<div class="form-group">
	<label class="control-label">Время:</label>
	<input type="text" class="form-control form-control-timepicker" value="12:00">
</div><!-- .form-group -->

В ряд

<div class="form-group">
	<label class="control-label">Пример 1:</label>

	<div class="form-inline">
		<div class="form-group">
			<input type="text" class="form-control form-control-datepicker" value="06.08.2026">
		</div><!-- .form-group -->

		<div class="form-group">
			<input type="text" class="form-control form-control-timepicker" value="12:00">
		</div><!-- .form-group -->

		<div class="form-group">
			<label class="form-control-checkbox">
				<input type="checkbox" name="">
				<span></span>бессрочно
			</label>
		</div><!-- .form-group -->
		
		<div class="form-group">
			<input type="text" class="form-control">
		</div><!-- .form-group -->

	</div><!-- .form-inline -->

</div><!-- .form-group -->

<div class="form-group">
	<label class="control-label">Пример 2:</label>

	<div class="form-inline">
		<div class="form-group">
			<label>Дата:</label>
			<input type="text" class="form-control form-control-datepicker" value="06.08.2026">
		</div><!-- .form-group -->

		<div class="form-group">
			<label>Время:</label>
			<input type="text" class="form-control form-control-timepicker" value="12:00">
		</div><!-- .form-group -->

		<div class="form-group">
			<label>текст</label>
		</div><!-- .form-group -->
		
		<div class="form-group">
			<input type="text" class="form-control">
		</div><!-- .form-group -->

	</div><!-- .form-inline -->

</div><!-- .form-group -->

В колонки

<div class="form-group">
	<label class="control-label">Колонки:</label>

	<div class="form-group-row">

		<div class="col-4">
			<input type="text" class="form-control">
		</div><!-- .col -->
		<div class="col-4">
			<input type="text" class="form-control">
		</div><!-- .col -->
		<div class="col-4">
			<input type="text" class="form-control">
		</div><!-- .col -->

	</div><!-- .form-group-row -->

</div><!-- .form-group -->

<div class="form-group">
	<label class="control-label">Колонки:</label>

	<div class="form-group-row">

		<div class="col-3">
			<input type="text" class="form-control">
		</div><!-- .col -->
		<div class="col-3">
			<input type="text" class="form-control">
		</div><!-- .col -->
		<div class="col-3">
			<input type="text" class="form-control">
		</div><!-- .col -->
		<div class="col-3">
			<input type="text" class="form-control">
		</div><!-- .col -->

	</div><!-- .form-group-row -->

</div><!-- .form-group -->

Пруппы полей

₽
₽
Moldova +373 Украина +380 Россия +7 Россия +7 Россия +7 Россия +7 Россия +7 Россия +7 Россия +7 
<div class="form-group">

	<label class="control-label">Название</label>

	<div class="input-group">
		<input class="form-control" value="1970">
		<span class="input-group-addon">₽</span>
	</div><!-- .input-group -->

</div><!-- .form-group -->

<div class="form-group">

	<div class="input-group">
		<span class="input-group-addon">₽</span>
		<input class="form-control" value="1970">
	</div><!-- .input-group -->

</div><!-- .form-group -->


<div class="form-group">

	<label class="control-label">Выбор протокола</label>
	
	<div class="input-group">
		<div class="input-group-btn">
			<button type="button" class="btn btn-toggle-protocol" data-toggle="dropdown">
				<span class="text">//</span> <span class="caret"></span>
			</button>
			<ul class="dropdown-menu">
				<li><a href="#">//</a></li>
				<li><a href="#">http://</a></li>
				<li><a href="#">https://</a></li>
			</ul>
		</div><!-- .input-group-btn -->
		<input type="text" class="form-control">
	</div><!-- .input-group -->

</div><!-- .form-group -->

<div class="form-group">

	<label class="control-label">Выбор Кода Страны <a href="https://ru.piliapp.com/emoji/list/flags/#emoji-list" target="_blank">Флаги</a></label>
	<!-- flags https://ru.piliapp.com/emoji/list/flags/#emoji-list -->
	<div class="input-group">
		<div class="input-group-btn">
			<button type="button" class="btn btn-toggle-flag" data-toggle="dropdown">
				<span class="flag"><img src="https://pic.sopili.net/pub/emoji/apple/64/1f1f7-1f1fa.png"></span>
				<span class="text">+7</span>
				<span class="caret"></span>
			</button>
			<div class="dropdown-menu">
				<div class="lang-search">
					<input type="text" class="form-control">
				</div>
				<div class="languages-list">
					<a href="#">
						<span class="flag"><img src="https://pic.sopili.net/pub/emoji/apple/64/1f1f2-1f1e9.png"></span>
						<span>Moldova</span>
						<span>+373</span>
					</a>
					<a href="#">
						<span class="flag"><img src="https://pic.sopili.net/pub/emoji/apple/64/1f1fa-1f1e6.png"></span>
						<span>Украина</span>
						<span>+380</span>
					</a>
					<a href="#">
						<span class="flag"><img src="https://pic.sopili.net/pub/emoji/apple/64/1f1f7-1f1fa.png"></span>
						<span>Россия</span>
						<span>+7</span>
					</a>
					<a href="#">
						<span class="flag"><img src="https://pic.sopili.net/pub/emoji/apple/64/1f1f7-1f1fa.png"></span>
						<span>Россия</span>
						<span>+7</span>
					</a>
					<a href="#">
						<span class="flag"><img src="https://pic.sopili.net/pub/emoji/apple/64/1f1f7-1f1fa.png"></span>
						<span>Россия</span>
						<span>+7</span>
					</a>
					<a href="#">
						<span class="flag"><img src="https://pic.sopili.net/pub/emoji/apple/64/1f1f7-1f1fa.png"></span>
						<span>Россия</span>
						<span>+7</span>
					</a>
					<a href="#">
						<span class="flag"><img src="https://pic.sopili.net/pub/emoji/apple/64/1f1f7-1f1fa.png"></span>
						<span>Россия</span>
						<span>+7</span>
					</a>
					<a href="#">
						<span class="flag"><img src="https://pic.sopili.net/pub/emoji/apple/64/1f1f7-1f1fa.png"></span>
						<span>Россия</span>
						<span>+7</span>
					</a>
					<a href="#">
						<span class="flag"><img src="https://pic.sopili.net/pub/emoji/apple/64/1f1f7-1f1fa.png"></span>
						<span>Россия</span>
						<span>+7</span>
					</a>
				</div>
			</div>
		</div><!-- .input-group-btn -->
		<input type="text" class="form-control">
	</div><!-- .input-group -->

</div><!-- .form-group -->

Редактор

Расширенный текстовый редактор.

Панешь инструментов состоит из 3 частей:
1. Выбор тегов(переменных).
2. Инструменты для текста
3. Смайлики. источник изображений emoji.

Недавние
Смайлики
Еда
Действия
Путешествия
Объекты
Символы 
<div class="utp-editor">

	<div class="utp-editor-toolbar">

		<div class="utp-editor-controls utp-editor-tags">
			<div class="item">
				<button class="item-button">[Имя]</button>
			</div>
			<div class="item">
				<button class="item-button">[E-mail]</button>
			</div>
			<div class="item">
				<button class="item-button">[Телефон]</button>
			</div>
			<div class="item">
				<button class="item-button">[Город]</button>
			</div>
			<div class="item">
				<button class="item-button">[Страна]</button>
			</div>
			<div class="item">
				<button class="item-button">[Дата рождения]</button>
			</div>
			<div class="item">
				<button class="item-button" data-toggle="modal" data-target="#modal-editor-group-action">[Добавить / удалить из групп]</button>
			</div>
		</div><!-- .utp-editor-tags -->

		<div class="utp-editor-controls">
			<div class="item">
				<button class="item-button">
					<i class="fas fa-bold"></i>
				</button>
			</div>
			<div class="item">
				<button class="item-button">
					<i class="fas fa-italic"></i>
				</button>
			</div>
			<div class="item">
				<button class="item-button">
					<i class="fas fa-strikethrough"></i>
				</button>
			</div>
			<div class="item">
				<button class="item-button">
					<i class="fas fa-list-ul"></i>
				</button>
			</div>
			<div class="item">
				<button class="item-button">
					<i class="fas fa-list-ol"></i>
				</button>
			</div>
			<div class="item">
				<button class="item-button">
					<i class="fas fa-minus"></i>
				</button>
			</div>
			<div class="item">
				<button class="item-button" data-toggle="modal" data-target="#modal-editor-add-link">
					<i class="fas fa-link"></i>
				</button>
			</div>
			<div class="item">
				<button class="item-button" data-toggle="modal" data-target="#modal-editor-add-image">
					<i class="fas fa-image"></i>
				</button>
			</div>
		</div><!-- .utp-editor-controls -->

		<div class="utp-editor-controls emojy-tabs">
			<div class="item">
				<a href="#emoji-cat-1" data-toggle="tab">
					<span class="emojy-tabs-image">

						<img src="https://pic.sopili.net/pub/emoji/apple/64/1f600.png" alt="">
					</span>				Недавние				</a>
			</div>
			<div class="item">
				<a href="#emoji-cat-2" data-toggle="tab">				Смайлики				</a>
			</div>
			<div class="item">
				<a href="#emoji-cat-3" data-toggle="tab">				Еда				</a>
			</div>
			<div class="item">
				<a href="#emoji-cat-4" data-toggle="tab">				Действия				</a>
			</div>
			<div class="item">
				<a href="#emoji-cat-5" data-toggle="tab">				Путешествия				</a>
			</div>
			<div class="item">
				<a href="#emoji-cat-6" data-toggle="tab">				Объекты				</a>
			</div>
			<div class="item">
				<a href="#emoji-cat-7" data-toggle="tab">				Символы				</a>
			</div>
		</div><!-- .utp-editor-controls -->

	</div><!-- .utp-editor-toolbar -->

<div class="tab-content emojy-tab-content">

		<div class="tab-pane fade" id="emoji-cat-1">
			<div class="emojy-tab-body">
				<div class="emoji-list">
					<span class="emoji-item">
						<img src="https://pic.sopili.net/pub/emoji/apple/64/1f600.png" alt="">
					</span>
					<span class="emoji-item">
						<img src="https://pic.sopili.net/pub/emoji/apple/64/1f600.png" alt="">
					</span>
					<span class="emoji-item">
						<img src="https://pic.sopili.net/pub/emoji/apple/64/1f600.png" alt="">
					</span>
				</div>
			</div>
		</div>

		<div class="tab-pane fade" id="emoji-cat-2">
			<div class="emojy-tab-body">
				<div class="emoji-list">
					<span class="emoji-item">
						<img src="https://pic.sopili.net/pub/emoji/apple/64/1f600.png" alt="">
					</span>
					<span class="emoji-item">
						<img src="https://pic.sopili.net/pub/emoji/apple/64/1f600.png" alt="">
					</span>
					<span class="emoji-item">
						<img src="https://pic.sopili.net/pub/emoji/apple/64/1f600.png" alt="">
					</span>
				</div>
			</div>
		</div>

		<div class="tab-pane fade" id="emoji-cat-3">
			<div class="emojy-tab-body">
				<div class="emoji-list">
					<span class="emoji-item">
						<img src="https://pic.sopili.net/pub/emoji/apple/64/1f436.png" alt="">
					</span>
					<span class="emoji-item">
						<img src="https://pic.sopili.net/pub/emoji/apple/64/1f436.png" alt="">
					</span>
					<span class="emoji-item">
						<img src="https://pic.sopili.net/pub/emoji/apple/64/1f436.png" alt="">
					</span>
				</div>
			</div>
		</div>

		<div class="tab-pane fade" id="emoji-cat-4">
			<div class="emojy-tab-body">
				<div class="emoji-list">
					<span class="emoji-item">
						<img src="https://pic.sopili.net/pub/emoji/apple/64/1f34f.png" alt="">
					</span>
					<span class="emoji-item">
						<img src="https://pic.sopili.net/pub/emoji/apple/64/1f34f.png" alt="">
					</span>
					<span class="emoji-item">
						<img src="https://pic.sopili.net/pub/emoji/apple/64/1f34f.png" alt="">
					</span>
				</div>
			</div>
		</div>

		<div class="tab-pane fade" id="emoji-cat-5">
			<div class="emojy-tab-body">
				<div class="emoji-list">
					<span class="emoji-item">
						<img src="https://pic.sopili.net/pub/emoji/apple/64/26bd.png" alt="">
					</span>
					<span class="emoji-item">
						<img src="https://pic.sopili.net/pub/emoji/apple/64/26bd.png" alt="">
					</span>
					<span class="emoji-item">
						<img src="https://pic.sopili.net/pub/emoji/apple/64/26bd.png" alt="">
					</span>
				</div>
			</div>
		</div>

		<div class="tab-pane fade" id="emoji-cat-6">
			<div class="emojy-tab-body">
				<div class="emoji-list">
					<span class="emoji-item">
						<img src="https://pic.sopili.net/pub/emoji/apple/64/1f697.png" alt="">
					</span>
					<span class="emoji-item">
						<img src="https://pic.sopili.net/pub/emoji/apple/64/1f697.png" alt="">
					</span>
					<span class="emoji-item">
						<img src="https://pic.sopili.net/pub/emoji/apple/64/1f697.png" alt="">
					</span>
				</div>
			</div>
		</div>

		<div class="tab-pane fade" id="emoji-cat-7">
			<div class="emojy-tab-body">
				<div class="emoji-list">
					<span class="emoji-item">
						<img src="https://pic.sopili.net/pub/emoji/apple/64/231a.png" alt="">
					</span>
					<span class="emoji-item">
						<img src="https://pic.sopili.net/pub/emoji/apple/64/231a.png" alt="">
					</span>
					<span class="emoji-item">
						<img src="https://pic.sopili.net/pub/emoji/apple/64/231a.png" alt="">
					</span>
				</div>
			</div>
		</div>

		<div class="tab-pane fade" id="emoji-cat-8">
			<div class="emojy-tab-body">
				<div class="emoji-list">
					<span class="emoji-item">
						<img src="https://pic.sopili.net/pub/emoji/apple/64/2764.png" alt="">
					</span>
					<span class="emoji-item">
						<img src="https://pic.sopili.net/pub/emoji/apple/64/2764.png" alt="">
					</span>
					<span class="emoji-item">
						<img src="https://pic.sopili.net/pub/emoji/apple/64/2764.png" alt="">
					</span>
				</div>
			</div>
		</div>

	</div><!-- .emojy-tab-content -->

	<textarea class="form-control" rows="16">Контент</textarea>

</div><!-- .utp-editor -->

Все существующие теги

<div class="utp-editor">

	<div class="utp-editor-toolbar">

		<div class="utp-editor-controls utp-editor-tags">
			<div class="item">
				<button class="item-button">[Внесено]</button>
			</div>
			<div class="item">
				<button class="item-button">[Город]</button>
			</div>
			<div class="item">
				<button class="item-button">[Дата рождения]</button>
			</div>
			<div class="item">
				<button class="item-button">[Дата оформления]</button>
			</div>
			<div class="item">
				<button class="item-button">[Дата предоплаты]</button>
			</div>
			<div class="item">
				<button class="item-button" data-toggle="modal" data-target="#modal-editor-group-action">[Добавить / удалить из групп]</button>
			</div>
			<div class="item">
				<button class="item-button">[Должность менеджера]</button>
			</div>
			<div class="item">
				<button class="item-button">[E-mail]</button>
			</div>
			<div class="item">
				<button class="item-button">[E-mail менеджера]</button>
			</div>
			<div class="item">
				<button class="item-button">[Имя]</button>
			</div>
			<div class="item">
				<button class="item-button">[Имя менеджера]</button>
			</div>
			<div class="item">
				<button class="item-button">[Номер заказа]</button>
			</div>
			<div class="item">
				<button class="item-button">[Остаток]</button>
			</div>
			<div class="item">
				<button class="item-button">[Пароль]</button>
			</div>
			<div class="item">
				<button class="item-button">[Продукт]</button>
			</div>
			<div class="item">
				<button class="item-button">[Срок действия]</button>
			</div>
			<div class="item">
				<button class="item-button">[Ссылка ВК]</button>
			</div>
			<div class="item">
				<button class="item-button">[Ссылка FB]</button>
			</div>
			<div class="item">
				<button class="item-button">[Ссылка на оплату]</button>
			</div>
			<div class="item">
				<button class="item-button">[Ссылка на отмену]</button>
			</div>
			<div class="item">
				<button class="item-button">[Ссылка на оферту]</button>
			</div>
			<div class="item">
				<button class="item-button">[Ссылка с доступом]</button>
			</div>
			<div class="item">
				<button class="item-button">[Страна]</button>
			</div>
			<div class="item">
				<button class="item-button">[Сумма]</button>
			</div>
			<div class="item">
				<button class="item-button">[Таймер]</button>
			</div>
			<div class="item">
				<button class="item-button">[Телефон]</button>
			</div>
			<div class="item">
				<button class="item-button">[Телефон менеджера]</button>
			</div>
			<div class="item">
				<button class="item-button">[Фамилия]</button>
			</div>
		</div><!-- .utp-editor-tags -->

		<div class="utp-editor-controls">
			<div class="item">
				<button class="item-button">
					<i class="fas fa-bold"></i>
				</button>
			</div>
			<div class="item">
				<button class="item-button">
					<i class="fas fa-italic"></i>
				</button>
			</div>
			<div class="item">
				<button class="item-button">
					<i class="fas fa-strikethrough"></i>
				</button>
			</div>
			<div class="item">
				<button class="item-button">
					<i class="fas fa-list-ul"></i>
				</button>
			</div>
			<div class="item">
				<button class="item-button">
					<i class="fas fa-list-ol"></i>
				</button>
			</div>
			<div class="item">
				<button class="item-button">
					<i class="fas fa-minus"></i>
				</button>
			</div>
			<div class="item">
				<button class="item-button" data-toggle="modal" data-target="#modal-editor-add-link">
					<i class="fas fa-link"></i>
				</button>
			</div>
			<div class="item">
				<button class="item-button" data-toggle="modal" data-target="#modal-editor-add-image">
					<i class="fas fa-image"></i>
				</button>
			</div>
		</div><!-- .utp-editor-controls -->

	</div><!-- .utp-editor-toolbar -->
	<textarea class="form-control" rows="16">Контент</textarea>

</div><!-- .utp-editor -->

Группы списков

Уровень 1

<div class="panel-group panel-group-checkbox">

	<div class="panel">

		<div class="checkbox-item">
			<label class="form-control-checkbox">
				<input type="checkbox" name="">
				<span>Название элемента</span>
			</label>
		</div>
		<div class="checkbox-item">
			<label class="form-control-checkbox">
				<input type="checkbox" name="">
				<span>Название элемента</span>
			</label>
		</div>
		<div class="checkbox-item">
			<label class="form-control-checkbox">
				<input type="checkbox" name="">
				<span>Название элемента</span>
			</label>
		</div>

	</div><!-- .panel -->

</div><!-- .panel-group-checkbox -->

Уровень 2

<div class="panel-group panel-group-checkbox">

	<div class="panel">

		<label class="form-control-checkbox">
			<input type="checkbox" name="" class="js-check-all-products">
			<span></span>
		</label>

		<a href="#" class="collapsed">Категория</a>

		<div class="panel-collapse collapse">
			<div class="panel-body">

				<div class="checkbox-item">
					<label class="form-control-checkbox">
						<input type="checkbox" name="">
						<span>Название элемента</span>
					</label>
				</div>
				<div class="checkbox-item">
					<label class="form-control-checkbox">
						<input type="checkbox" name="">
						<span>Название элемента</span>
					</label>
				</div>
				<div class="checkbox-item">
					<label class="form-control-checkbox">
						<input type="checkbox" name="">
						<span>Название элемента</span>
					</label>
				</div>

			</div><!-- .panel-body -->
		</div><!-- .panel-collapse -->
	</div><!-- .panel -->

	<div class="panel">

		<label class="form-control-checkbox">
			<input type="checkbox" name="" class="js-check-all-products">
			<span></span>
		</label>

		<a href="#" class="collapsed">Категория</a>

		<div class="panel-collapse collapse">
			<div class="panel-body">

				<div class="checkbox-item">
					<label class="form-control-checkbox">
						<input type="checkbox" name="">
						<span>Название элемента</span>
					</label>
				</div>
				<div class="checkbox-item">
					<label class="form-control-checkbox">
						<input type="checkbox" name="">
						<span>Название элемента</span>
					</label>
				</div>
				<div class="checkbox-item">
					<label class="form-control-checkbox">
						<input type="checkbox" name="">
						<span>Название элемента</span>
					</label>
				</div>

			</div><!-- .panel-body -->
		</div><!-- .panel-collapse -->
	</div><!-- .panel -->

	<div class="panel">

		<label class="form-control-checkbox">
			<input type="checkbox" name="" class="js-check-all-products">
			<span></span>
		</label>

		<a href="#" class="collapsed">Категория</a>

		<div class="panel-collapse collapse">
			<div class="panel-body">

				<div class="checkbox-item">
					<label class="form-control-checkbox">
						<input type="checkbox" name="">
						<span>Название элемента</span>
					</label>
				</div>
				<div class="checkbox-item">
					<label class="form-control-checkbox">
						<input type="checkbox" name="">
						<span>Название элемента</span>
					</label>
				</div>
				<div class="checkbox-item">
					<label class="form-control-checkbox">
						<input type="checkbox" name="">
						<span>Название элемента</span>
					</label>
				</div>

			</div><!-- .panel-body -->
		</div><!-- .panel-collapse -->
	</div><!-- .panel -->

</div><!-- .panel-group-checkbox -->

Уровень 3

<div class="panel-group panel-group-checkbox">

	<div class="panel">

		<label class="form-control-checkbox">
			<input type="checkbox" name="" class="js-check-all-products">
			<span></span>
		</label>

		<a href="#" class="collapsed">Категория</a>

		<div class="panel-collapse collapse">
			<div class="panel-body">

				<div class="panel">

					<label class="form-control-checkbox">
						<input type="checkbox" name="" class="js-check-all-products">
						<span></span>
					</label>

					<a href="#" class="collapsed">Подкатегория</a>
					<div class="panel-collapse collapse">
						<div class="panel-body">
							<!-- Level 3 -->
							<div class="checkbox-item">
								<label class="form-control-checkbox">
									<input type="checkbox" name="">
									<span>Название элемента</span>
								</label>
							</div>
							<div class="checkbox-item">
								<label class="form-control-checkbox">
									<input type="checkbox" name="">
									<span>Название элемента</span>
								</label>
							</div>
							<div class="checkbox-item">
								<label class="form-control-checkbox">
									<input type="checkbox" name="">
									<span>Название элемента</span>
								</label>
							</div>
						</div><!-- .panel-body -->
					</div><!-- .collapse -->

				</div><!-- .panel -->

				<div class="panel">

					<label class="form-control-checkbox">
						<input type="checkbox" name="" class="js-check-all-products">
						<span></span>
					</label>

					<a href="#" class="collapsed">Подкатегория</a>
					<div class="panel-collapse collapse">
						<div class="panel-body">
							<!-- Level 3 -->
							<div class="checkbox-item">
								<label class="form-control-checkbox">
									<input type="checkbox" name="">
									<span>Название элемента</span>
								</label>
							</div>
							<div class="checkbox-item">
								<label class="form-control-checkbox">
									<input type="checkbox" name="">
									<span>Название элемента</span>
								</label>
							</div>
							<div class="checkbox-item">
								<label class="form-control-checkbox">
									<input type="checkbox" name="">
									<span>Название элемента</span>
								</label>
							</div>
						</div><!-- .panel-body -->
					</div><!-- .collapse -->
				</div><!-- .panel -->

				<div class="panel">

					<label class="form-control-checkbox">
						<input type="checkbox" name="" class="js-check-all-products">
						<span></span>
					</label>

					<a href="#" class="collapsed">Подкатегория</a>
					<div class="panel-collapse collapse">
						<div class="panel-body">
							<!-- Level 3 -->
							<div class="checkbox-item">
								<label class="form-control-checkbox">
									<input type="checkbox" name="">
									<span>Название элемента</span>
								</label>
							</div>
							<div class="checkbox-item">
								<label class="form-control-checkbox">
									<input type="checkbox" name="">
									<span>Название элемента</span>
								</label>
							</div>
							<div class="checkbox-item">
								<label class="form-control-checkbox">
									<input type="checkbox" name="">
									<span>Название элемента</span>
								</label>
							</div>
						</div><!-- .panel-body -->
					</div><!-- .collapse -->
				</div><!-- .panel level-2 -->	

			</div><!-- .panel-body -->
		</div><!-- .panel-collapse -->
	</div><!-- .panel -->

	<div class="panel">

		<label class="form-control-checkbox">
			<input type="checkbox" name="" class="js-check-all-products">
			<span></span>
		</label>

		<a href="#" class="collapsed">Категория</a>

		<div class="panel-collapse collapse">
			<div class="panel-body">

				<div class="panel">

					<label class="form-control-checkbox">
						<input type="checkbox" name="" class="js-check-all-products">
						<span></span>
					</label>

					<a href="#" class="collapsed">Подкатегория</a>
					<div class="panel-collapse collapse">
						<div class="panel-body">
							<!-- Level 3 -->
							<div class="checkbox-item">
								<label class="form-control-checkbox">
									<input type="checkbox" name="">
									<span>Название элемента</span>
								</label>
							</div>
							<div class="checkbox-item">
								<label class="form-control-checkbox">
									<input type="checkbox" name="">
									<span>Название элемента</span>
								</label>
							</div>
							<div class="checkbox-item">
								<label class="form-control-checkbox">
									<input type="checkbox" name="">
									<span>Название элемента</span>
								</label>
							</div>
						</div><!-- .panel-body -->
					</div><!-- .collapse -->

				</div><!-- .panel -->

				<div class="panel">

					<label class="form-control-checkbox">
						<input type="checkbox" name="" class="js-check-all-products">
						<span></span>
					</label>

					<a href="#" class="collapsed">Подкатегория</a>
					<div class="panel-collapse collapse">
						<div class="panel-body">
							<!-- Level 3 -->
							<div class="checkbox-item">
								<label class="form-control-checkbox">
									<input type="checkbox" name="">
									<span>Название элемента</span>
								</label>
							</div>
							<div class="checkbox-item">
								<label class="form-control-checkbox">
									<input type="checkbox" name="">
									<span>Название элемента</span>
								</label>
							</div>
							<div class="checkbox-item">
								<label class="form-control-checkbox">
									<input type="checkbox" name="">
									<span>Название элемента</span>
								</label>
							</div>
						</div><!-- .panel-body -->
					</div><!-- .collapse -->
				</div><!-- .panel -->

				<div class="panel">

					<label class="form-control-checkbox">
						<input type="checkbox" name="" class="js-check-all-products">
						<span></span>
					</label>

					<a href="#" class="collapsed">Подкатегория</a>
					<div class="panel-collapse collapse">
						<div class="panel-body">
							<!-- Level 3 -->
							<div class="checkbox-item">
								<label class="form-control-checkbox">
									<input type="checkbox" name="">
									<span>Название элемента</span>
								</label>
							</div>
							<div class="checkbox-item">
								<label class="form-control-checkbox">
									<input type="checkbox" name="">
									<span>Название элемента</span>
								</label>
							</div>
							<div class="checkbox-item">
								<label class="form-control-checkbox">
									<input type="checkbox" name="">
									<span>Название элемента</span>
								</label>
							</div>
						</div><!-- .panel-body -->
					</div><!-- .collapse -->
				</div><!-- .panel level-2 -->	

			</div><!-- .panel-body -->
		</div><!-- .panel-collapse -->
	</div><!-- .panel -->

	<div class="panel">

		<label class="form-control-checkbox">
			<input type="checkbox" name="" class="js-check-all-products">
			<span></span>
		</label>

		<a href="#" class="collapsed">Категория</a>

		<div class="panel-collapse collapse">
			<div class="panel-body">

				<div class="panel">

					<label class="form-control-checkbox">
						<input type="checkbox" name="" class="js-check-all-products">
						<span></span>
					</label>

					<a href="#" class="collapsed">Подкатегория</a>
					<div class="panel-collapse collapse">
						<div class="panel-body">
							<!-- Level 3 -->
							<div class="checkbox-item">
								<label class="form-control-checkbox">
									<input type="checkbox" name="">
									<span>Название элемента</span>
								</label>
							</div>
							<div class="checkbox-item">
								<label class="form-control-checkbox">
									<input type="checkbox" name="">
									<span>Название элемента</span>
								</label>
							</div>
							<div class="checkbox-item">
								<label class="form-control-checkbox">
									<input type="checkbox" name="">
									<span>Название элемента</span>
								</label>
							</div>
						</div><!-- .panel-body -->
					</div><!-- .collapse -->

				</div><!-- .panel -->

				<div class="panel">

					<label class="form-control-checkbox">
						<input type="checkbox" name="" class="js-check-all-products">
						<span></span>
					</label>

					<a href="#" class="collapsed">Подкатегория</a>
					<div class="panel-collapse collapse">
						<div class="panel-body">
							<!-- Level 3 -->
							<div class="checkbox-item">
								<label class="form-control-checkbox">
									<input type="checkbox" name="">
									<span>Название элемента</span>
								</label>
							</div>
							<div class="checkbox-item">
								<label class="form-control-checkbox">
									<input type="checkbox" name="">
									<span>Название элемента</span>
								</label>
							</div>
							<div class="checkbox-item">
								<label class="form-control-checkbox">
									<input type="checkbox" name="">
									<span>Название элемента</span>
								</label>
							</div>
						</div><!-- .panel-body -->
					</div><!-- .collapse -->
				</div><!-- .panel -->

				<div class="panel">

					<label class="form-control-checkbox">
						<input type="checkbox" name="" class="js-check-all-products">
						<span></span>
					</label>

					<a href="#" class="collapsed">Подкатегория</a>
					<div class="panel-collapse collapse">
						<div class="panel-body">
							<!-- Level 3 -->
							<div class="checkbox-item">
								<label class="form-control-checkbox">
									<input type="checkbox" name="">
									<span>Название элемента</span>
								</label>
							</div>
							<div class="checkbox-item">
								<label class="form-control-checkbox">
									<input type="checkbox" name="">
									<span>Название элемента</span>
								</label>
							</div>
							<div class="checkbox-item">
								<label class="form-control-checkbox">
									<input type="checkbox" name="">
									<span>Название элемента</span>
								</label>
							</div>
						</div><!-- .panel-body -->
					</div><!-- .collapse -->
				</div><!-- .panel level-2 -->	

			</div><!-- .panel-body -->
		</div><!-- .panel-collapse -->
	</div><!-- .panel -->

</div><!-- .panel-group-checkbox -->
Текст ссылки https://mysite.com/category/subcategory/page-link/subpagelink/some-long-page-url/ Название картинки https://mysite.com/uploads/image-name.png [#link1()] [#image1()] 
<div class="form-links-group">
	<a href="#" class="item">
		<span>Текст ссылки</span>
		<code>https://mysite.com/category/subcategory/page-link/subpagelink/some-long-page-url/</code>
	</a>
	<a href="#" class="item">
		<span>Название картинки</span>
		<code>https://mysite.com/uploads/image-name.png</code>
	</a>
	<a href="#" class="item"><code>[#link1()]</code></a>
	<a href="#" class="item"><code>[#image1()]</code></a>
</div><!-- .form-links-group -->

Список продуктов

Продукты не выбранны
Длинное название продукта которое переходит в новую строку чтобы тестировать как отаброжается текст в две строки
₽
Краткое название продукта
₽
Название продукта но без указания цены
Название продукта без ссылки 
<div class="form-group">
	<label class="control-label">Продукты:</label>

	<div class="form-group-products">

		<!-- If products list is empty -->
		<div class="item item-empty">
			<span class="empty-placeholder">Продукты не выбранны</span>
		</div>

		<div class="item">
			<div class="item-name">
				<a href="#">Длинное название продукта которое переходит в новую строку чтобы тестировать как отаброжается текст в две строки</a>
			</div>
			<div class="item-price">
				<div class="input-group">
					<input class="form-control" value="1970">
					<span class="input-group-addon">₽</span>
				</div>
			</div>
			<div class="item-action">
				<a href="#" class="btn-action btn-delete">
					<i class="icon-cancel"></i>
				</a>
			</div>
		</div><!-- .item -->

		<div class="item">
			<div class="item-name">
				<a href="#">Краткое название продукта</a>
			</div>
			<div class="item-price">
				<div class="input-group">
					<input class="form-control" value="1970">
					<span class="input-group-addon">₽</span>
				</div>
			</div>
			<div class="item-action">
				<a href="#" class="btn-action btn-delete">
					<i class="icon-cancel"></i>
				</a>
			</div>
		</div><!-- .item -->

		<div class="item">
			<div class="item-name">
				<a href="#">Название продукта но без указания цены</a>
			</div>
			<div class="item-action">
				<a href="#" class="btn-action btn-delete">
					<i class="icon-cancel"></i>
				</a>
			</div>
		</div><!-- .item -->

		<div class="item">
			<div class="item-name">
				Название продукта без ссылки
			</div>
			<div class="item-action">
				<a href="#" class="btn-action btn-delete">
					<i class="icon-cancel"></i>
				</a>
			</div>
		</div><!-- .item -->

	</div><!-- .form-group-products -->

	<button type="button" class="btn btn-default" data-toggle="modal" data-target="#modal-add-product">Добавить продукт</button>

</div><!-- .form-group -->

Картинки в админке

<div class="form-group">
	<label class="control-label">Одна картинка</label>
	<div class="form-group-images">
		<div class="item">
			<a href="https://dev.bootbiz.ru/content/image-fancybox.jpg" data-fancybox="gallery-1" class="item-link">
				<img src="https://dev.bootbiz.ru/content/image-fancybox.jpg" alt="">
			</a>
		</div>
	</div><!-- .form-group-images -->
</div><!-- .form-group -->

<div class="form-group">
	<label class="control-label">Две картинки</label>
	<div class="form-group-images">
		<div class="item">
			<a href="https://dev.bootbiz.ru/content/image-fancybox.jpg" data-fancybox="gallery-2" class="item-link">
				<img src="https://dev.bootbiz.ru/content/image-fancybox.jpg" alt="">
			</a>
		</div>
		<div class="item">
			<a href="https://dev.bootbiz.ru/content/image-fancybox.jpg" data-fancybox="gallery-2" class="item-link">
				<img src="https://dev.bootbiz.ru/content/image-fancybox.jpg" alt="">
			</a>
		</div>
	</div><!-- .form-group-images -->
</div><!-- .form-group -->

<div class="form-group">
	<label class="control-label">Три картинки</label>
	<div class="form-group-images">
		<div class="item">
			<a href="https://dev.bootbiz.ru/content/image-fancybox.jpg" data-fancybox="gallery-3" class="item-link">
				<img src="https://dev.bootbiz.ru/content/image-fancybox.jpg" alt="">
			</a>
		</div>
		<div class="item">
			<a href="https://dev.bootbiz.ru/content/image-fancybox.jpg" data-fancybox="gallery-3" class="item-link">
				<img src="https://dev.bootbiz.ru/content/image-fancybox.jpg" alt="">
			</a>
		</div>
		<div class="item">
			<a href="https://dev.bootbiz.ru/content/image-fancybox.jpg" data-fancybox="gallery-3" class="item-link">
				<img src="https://dev.bootbiz.ru/content/image-fancybox.jpg" alt="">
			</a>
		</div>
	</div><!-- .form-group-images -->
</div><!-- .form-group -->

<div class="form-group">
	<label class="control-label">Четыре картинки</label>
	<div class="form-group-images">
		<div class="item">
			<a href="https://dev.bootbiz.ru/content/image-fancybox.jpg" data-fancybox="gallery-4" class="item-link">
				<img src="https://dev.bootbiz.ru/content/image-fancybox.jpg" alt="">
			</a>
		</div>
		<div class="item">
			<a href="https://dev.bootbiz.ru/content/image-fancybox.jpg" data-fancybox="gallery-4" class="item-link">
				<img src="https://dev.bootbiz.ru/content/image-fancybox.jpg" alt="">
			</a>
		</div>
		<div class="item">
			<a href="https://dev.bootbiz.ru/content/image-fancybox.jpg" data-fancybox="gallery-4" class="item-link">
				<img src="https://dev.bootbiz.ru/content/image-fancybox.jpg" alt="">
			</a>
		</div>
		<div class="item">
			<a href="https://dev.bootbiz.ru/content/image-fancybox.jpg" data-fancybox="gallery-4" class="item-link">
				<img src="https://dev.bootbiz.ru/content/image-fancybox.jpg" alt="">
			</a>
		</div>
	</div><!-- .form-group-images -->
</div><!-- .form-group -->

Разные наборы полей

Активация/Деактивация полей и кнопок нажатием на замок

<div class="form-group-lock">
	<div class="form-group">
		<input class="form-control" type="text" disabled>
	</div>
	<div class="form-group">
		<textarea class="form-control" rows="3" disabled></textarea>
	</div>
	<div class="form-group">
		<button class="btn btn-default" disabled>Сохранить</button>
		<button class="btn btn-toggle-lock"><i class="fas fa-lock"></i></button>
	</div>
</div><!-- .form-group-lock -->

В разработке

<div class="form-group">
	<label class="control-label">Часовой пояс:</label>
	<div class="form-inline">
		<select class="form-control form-control-inline select-time">
			<option value="msk">МСК</option>
			<option value="my">На моём компьютере</option>
			<option value="user">На компьютере пользователя</option>
			<option value="other">Другое</option>
		</select>
		<select class="form-control select-timezone hidden">
			<option value="-05:00">UTC+05:00</option>
			<option value="-04:00">UTC+04:00</option>
			<option value="-03:00">UTC+03:00</option>
			<option value="-02:00">UTC+02:00</option>
			<option value="-01:00">UTC+01:00</option>
			<option value="+00:00">UTC+00:00</option>
			<option value="+01:00">UTC+01:00</option>
			<option value="+02:00" selected="">UTC+02:00</option>
			<option value="+03:00">UTC+03:00</option>
			<option value="+04:00">UTC+04:00</option>
			<option value="+05:00">UTC+05:00</option>
		</select>
	</div>
</div>
Form Heading
₽
₽
% +
₽
Form Group Description
Buttons