<section class="section docs-section" id="forms">
<h2 class="section-title">Forms</h2>
<p class="docs-section-description">
Формы используют `.form-group`, `.label` и `.input`.
Ошибки задаются на label через `.error`, а пояснение выводится соседним `.input-info`.
</p>
<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-grid">
<div class="form-group">
<label class="label success">
Validated
<input type="text" class="input" value="Release Plan">
</label>
<div class="input-info"><i class="ph ph-check-circle"></i> Looks good</div>
</div>
<div class="form-group">
<label class="label warning">
Needs review
<input type="text" class="input" value="Draft">
</label>
<div class="input-info"><i class="ph ph-warning-circle"></i> Check before publishing</div>
</div>
<div class="form-group">
<label class="label">
Readonly
<input type="text" class="input" value="run_1048" readonly>
</label>
</div>
<div class="form-group">
<label class="label">
Disabled
<input type="text" class="input" value="Locked" disabled>
</label>
</div>
</div>
<div class="block form-grid">
<div class="form-group">
<label class="label">
Search
<i class="ph ph-magnifying-glass"></i>
<input type="search" class="input" value="release" placeholder="Search">
</label>
</div>
<div class="form-group">
<label class="label">
Number
<input type="number" class="input" value="42" min="0" max="100">
</label>
</div>
</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">
<fieldset class="fieldset">
<legend class="legend">Fieldset</legend>
<div class="form-grid">
<div class="form-group">
<label class="label">
First name
<input type="text" class="input" value="Ada">
</label>
</div>
<div class="form-group">
<label class="label">
Last name
<input type="text" class="input" value="Lovelace">
</label>
</div>
</div>
</fieldset>
</div>
<div class="block">
<label class="file-upload">
<i class="ph ph-upload-simple"></i>
Upload file
<input type="file">
</label>
</div>
<div class="block range">
<label class="label">
Range
<input type="range" min="0" max="100" value="64">
</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="label error">
Advanced Select
<i class="ph ph-user"></i>
<input type="text" class="input advanced-select-input" placeholder="Search">
</label>
<div class="advanced-select-container"></div>
<div class="input-info"><i class="ph ph-warning-circle"></i> Field cannot be empty</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", e => {
setTimeout(() => {
document.querySelector(".advanced-select-container").append(advancedSelect(
document.querySelector(".advanced-select-input"),
{
"name_1": "Joe",
"name_2": "James",
"name_3": "Jack",
"name_4": "Eliza",
"name_5": "Emily",
"name_6": "Eleanor",
"name_7": "Ella",
"name_8": "Ellie",
"name_9": "John",
"name_10": "David"
},
"Nothing found"
));
}, 300);
});
</script>
<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>
<div class="code-example">
<div class="code-example-header">
<span class="code-example-title">Forms HTML</span>
<button class="code-example-copy" type="button">Copy</button>
</div>
<pre><code class="language-html"><div class="form-group">
<label class="label error">
Project name
<i class="ph ph-user"></i>
<input class="input" type="text" placeholder="Launch Plan">
</label>
<div class="input-info">
<i class="ph ph-warning-circle"></i>
Field cannot be empty
</div>
</div>
<fieldset class="fieldset">
<legend class="legend">Fieldset</legend>
<label class="label success">
Validated
<input class="input" type="text" value="Release Plan">
</label>
</fieldset>
<label class="file-upload">
Upload file
<input type="file">
</label></code></pre>
</div>
</section>
