<section class="section" id="forms">
	<h2 class="section-title">Forms</h2>

	<div class="block form-group">
		<label class="label">
			Text input
			<input type="text" class="input" placeholder="Введите текст">
		</label>
	</div>

	<div class="block form-group">
		<label class="label error">
			Text input
			<i class="ph ph-user"></i>
			<input type="text" class="input" placeholder="Введите текст">
		</label>
		<div class="input-info"><i class="ph ph-warning-circle"></i> Field cannot be empty</div>
	</div>

	<div class="block form-group">
		<label class="label">
			Password
			<input type="password" class="input" placeholder="••••••">
		</label>
	</div>

	<div class="block form-group">
		<label class="label">
			Text Area
			<i class="ph ph-text-aa"></i>
			<textarea class="input" placeholder="Введите текст"></textarea>
		</label>
	</div>

	<div class="block form-group">
		<label class="label">
			Select
			<div class="select-wrap">
				<select class="input select">
					<option>Option 1</option>
					<option>Option 2</option>
				</select>
			</div>
		</label>
	</div>

	<div class="block form-group">
		<label class="label">
			Select
			<i class="ph ph-selection-all"></i>
			<div class="select-wrap">
				<select class="input select">
					<option>Option 1</option>
					<option>Option 2</option>
				</select>
			</div>
		</label>
	</div>

	<div class="block form-group">
		<label class="checkbox">
			<input type="checkbox">
			<span class="checkbox-control" aria-hidden="true"></span>
			<span class="checkbox-label">Checkbox 1</span>
		</label>

		<label class="checkbox mt-3">
			<input type="checkbox">
			<span class="checkbox-control" aria-hidden="true"></span>
			<span class="checkbox-label">Checkbox 2</span>
		</label>

		<label class="checkbox mt-3">
			<input type="checkbox" disabled>
			<span class="checkbox-control" aria-hidden="true"></span>
			<span class="checkbox-label">Disabled</span>
		</label>

		<label class="checkbox mt-3">
			<input type="checkbox" disabled checked>
			<span class="checkbox-control" aria-hidden="true"></span>
			<span class="checkbox-label">Disabled & Checked</span>
		</label>
	</div>

	<div class="block form-group">
		<label class="radio">
			<input type="radio" name="radio-demo">
			<span class="radio-control" aria-hidden="true"></span>
			<span class="radio-label">Radio 1</span>
		</label>

		<label class="radio ml-2">
			<input type="radio" name="radio-demo">
			<span class="radio-control" aria-hidden="true"></span>
			<span class="radio-label">Radio 2</span>
		</label>

		<label class="radio ml-2">
			<input type="radio" name="radio-demo" disabled>
			<span class="radio-control" aria-hidden="true"></span>
			<span class="radio-label">Radio 3</span>
		</label>
	</div>
</section>