<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">
                    <fieldset class="fieldset">
                      <legend class="legend">Date & Time</legend>
                      <div class="form-grid">
                        <div class="form-group">
                          <label class="label">Date<i class="ph ph-calendar-blank"></i><input type="date" class="input input-date" value="2026-04-23"></label>
                        </div>
                        <div class="form-group">
                          <label class="label">Time<i class="ph ph-clock"></i><input type="time" class="input input-time" value="14:30"></label>
                        </div>
                        <div class="form-group">
                          <label class="label">Date & time<i class="ph ph-calendar-dots"></i><input type="datetime-local" class="input input-datetime" value="2026-04-23T14:30"></label>
                        </div>
                        <div class="form-group">
                          <label class="label">Month<i class="ph ph-calendar"></i><input type="month" class="input input-month" value="2026-04"></label>
                        </div>
                      </div>
                    </fieldset>
                  </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">
                    <div class="file-upload-panel">
                      <form class="file-upload-form" action="#" method="post" enctype="multipart/form-data">
                        <div class="file-upload-header">
                          <div class="file-upload-heading">
                            <h3 class="file-upload-title">Upload files</h3>
                            <p class="file-upload-description">Attach documents, archives, screenshots or product images for review.</p>
                          </div>
                          <span class="badge badge-info">Max 12 MB</span>
                        </div>
                        <label class="file-upload-dropzone">
                          <span class="file-upload-icon" aria-hidden="true">
                            <i class="ph ph-cloud-arrow-up"></i>
                          </span>
                          <span class="file-upload-body">
                            <span class="file-upload-primary">Choose files</span>
                            <span class="file-upload-secondary">Images get thumbnails, other files show their type</span>
                          </span>
                          <input type="file" name="files" multiple data-file-upload-input>
                        </label>
                        <div class="file-upload-preview" data-file-upload-preview hidden></div>
                        <div class="file-upload-actions">
                          <button class="btn btn-secondary btn-small" type="reset">Reset</button>
                          <button class="btn btn-accent btn-small with-icon" type="submit">
                            <i class="ph ph-upload-simple"></i>
                            Upload
                          </button>
                        </div>
                      </form>
                    </div>
                  </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>
                  <div class="block form-group">
                    <GnTagInput v-model="demoTags" label="Tags" placeholder="Add item…" help="Press Enter to add, Backspace to remove last" />
                  </div>
                  <div class="block">
                    <GnRepeater v-model="demoRepeater" label="Fields" add-label="Add field">
                      <template #item="{ item, index, remove }">
                        <div class="form-grid">
                          <div class="form-group">
                            <label class="label">
                              Field name
                              <input type="text" class="input" :value="item.name" @input="e => item.name = e.target.value">
                            </label>
                          </div>
                          <div class="form-group">
                            <label class="label">
                              Value
                              <input type="text" class="input" :value="item.value" @input="e => item.value = e.target.value">
                            </label>
                          </div>
                        </div>
                      </template>
                    </GnRepeater>
                  </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>
                
<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Forms HTML</span>
			<button class="btn-icon btn-icon-sm" type="button" aria-label="Copy"><i class="ph ph-copy"></i></button>
		</div>
		<pre><code class="language-html">&lt;div class="form-group"&gt;
  &lt;label class="label error"&gt;
    Project name
    &lt;i class="ph ph-user"&gt;&lt;/i&gt;
    &lt;input class="input" type="text" placeholder="Launch Plan"&gt;
  &lt;/label&gt;
  &lt;div class="input-info"&gt;
    &lt;i class="ph ph-warning-circle"&gt;&lt;/i&gt;
    Field cannot be empty
  &lt;/div&gt;
&lt;/div&gt;

&lt;fieldset class="fieldset"&gt;
  &lt;legend class="legend"&gt;Fieldset&lt;/legend&gt;
  &lt;label class="label success"&gt;
    Validated
    &lt;input class="input" type="text" value="Release Plan"&gt;
  &lt;/label&gt;
&lt;/fieldset&gt;

&lt;label class="file-upload"&gt;
  Upload file
  &lt;input type="file"&gt;
&lt;/label&gt;

&lt;fieldset class="fieldset"&gt;
  &lt;legend class="legend"&gt;Date &amp; Time&lt;/legend&gt;
  &lt;div class="form-grid"&gt;
    &lt;label class="label"&gt;
      Date
      &lt;i class="ph ph-calendar-blank"&gt;&lt;/i&gt;
      &lt;input class="input input-date" type="date" value="2026-04-23" data-date-picker&gt;
    &lt;/label&gt;
    &lt;label class="label"&gt;
      Time
      &lt;i class="ph ph-clock"&gt;&lt;/i&gt;
      &lt;input class="input input-time" type="time" value="14:30" data-date-picker&gt;
    &lt;/label&gt;
    &lt;label class="label"&gt;
      Date &amp; time
      &lt;i class="ph ph-calendar-dots"&gt;&lt;/i&gt;
      &lt;input class="input input-datetime" type="datetime-local" value="2026-04-23T14:30" data-date-picker&gt;
    &lt;/label&gt;
  &lt;/div&gt;
&lt;/fieldset&gt;

&lt;div class="file-upload-panel"&gt;
  &lt;form class="file-upload-form" enctype="multipart/form-data"&gt;
    &lt;div class="file-upload-header"&gt;
      &lt;div class="file-upload-heading"&gt;
        &lt;h3 class="file-upload-title"&gt;Upload files&lt;/h3&gt;
        &lt;p class="file-upload-description"&gt;Attach documents, archives or images.&lt;/p&gt;
      &lt;/div&gt;
      &lt;span class="badge badge-info"&gt;Max 12 MB&lt;/span&gt;
    &lt;/div&gt;

    &lt;label class="file-upload-dropzone"&gt;
      &lt;span class="file-upload-icon" aria-hidden="true"&gt;
        &lt;i class="ph ph-cloud-arrow-up"&gt;&lt;/i&gt;
      &lt;/span&gt;
      &lt;span class="file-upload-body"&gt;
        &lt;span class="file-upload-primary"&gt;Choose files&lt;/span&gt;
        &lt;span class="file-upload-secondary"&gt;Images get thumbnails, other files show their type&lt;/span&gt;
      &lt;/span&gt;
      &lt;input type="file" name="files" multiple data-file-upload-input&gt;
    &lt;/label&gt;

    &lt;div class="file-upload-preview" data-file-upload-preview hidden&gt;&lt;/div&gt;

    &lt;div class="file-upload-actions"&gt;
      &lt;button class="btn btn-secondary btn-small" type="reset"&gt;Reset&lt;/button&gt;
      &lt;button class="btn btn-accent btn-small" type="submit"&gt;Upload&lt;/button&gt;
    &lt;/div&gt;
  &lt;/form&gt;
&lt;/div&gt;</code></pre>
	</div>

<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Tag Input HTML</span>
			<button class="btn-icon btn-icon-sm" type="button" aria-label="Copy"><i class="ph ph-copy"></i></button>
		</div>
		<pre><code class="language-html">&lt;div class="tag-input"&gt;
  &lt;div class="tag-input-wrap"&gt;
    &lt;span class="chip chip-secondary"&gt;frontend
      &lt;button class="chip-remove" type="button" aria-label="Remove frontend"&gt;
        &lt;i class="ph ph-x"&gt;&lt;/i&gt;
      &lt;/button&gt;
    &lt;/span&gt;
    &lt;input type="text" class="tag-input-field" placeholder="Add item…"&gt;
  &lt;/div&gt;
&lt;/div&gt;
&lt;div class="input-info"&gt;&lt;i class="ph ph-info"&gt;&lt;/i&gt; Press Enter to add&lt;/div&gt;</code></pre>
	</div>

<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Vue: GnTagInput</span>
			<button class="btn-icon btn-icon-sm" type="button" aria-label="Copy"><i class="ph ph-copy"></i></button>
		</div>
		<pre><code class="language-html">&lt;GnTagInput
  v-model="tags"
  label="Tags"
  placeholder="Add item…"
  help="Press Enter to add, Backspace to remove last"
  separator=","
  :unique="true"
  :max-items="10"
/&gt;</code></pre>
	</div>
	<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Repeater HTML</span>
			<button class="btn-icon btn-icon-sm" type="button" aria-label="Copy"><i class="ph ph-copy"></i></button>
		</div>
		<pre><code class="language-html">&lt;div class="repeater"&gt;
  &lt;div class="repeater-header"&gt;
    &lt;span class="repeater-title"&gt;Fields&lt;/span&gt;
    &lt;button class="btn btn-secondary btn-small" type="button"&gt;Add field&lt;/button&gt;
  &lt;/div&gt;
  &lt;div class="repeater-list"&gt;
    &lt;div class="repeater-item"&gt;
      &lt;div class="repeater-item-body form-grid"&gt;...&lt;/div&gt;
      &lt;div class="repeater-item-actions"&gt;
        &lt;button class="btn-icon btn-icon-sm" type="button"&gt;...&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
	</div>

	<div class="code-example">
		<div class="code-example-header">
			<span class="code-example-title">Vue: GnRepeater</span>
			<button class="btn-icon btn-icon-sm" type="button" aria-label="Copy"><i class="ph ph-copy"></i></button>
		</div>
		<pre><code class="language-html">&lt;GnRepeater v-model="fields" label="Fields" add-label="Add field"&gt;
  &lt;template #item="{ item, index, remove }"&gt;
    &lt;div class="form-grid"&gt;
      &lt;GnInput v-model="item.name" label="Name" /&gt;
      &lt;GnInput v-model="item.value" label="Value" /&gt;
    &lt;/div&gt;
  &lt;/template&gt;
&lt;/GnRepeater&gt;</code></pre>
	</div>
</section>