Forms

Basic Input

Формы строятся из .form-group, .label и .input.

<div class="form-group">
  <label class="label">
    Project name
    <input class="input" type="text" placeholder="Launch Plan">
  </label>
</div>

Состояния задаются на .label:

<label class="label error">
  Project name
  <i class="ph ph-warning-circle"></i>
  <input class="input" type="text">
</label>
<div class="input-info">
  <i class="ph ph-warning-circle"></i>
  Field cannot be empty
</div>

Доступные состояния:

• .error
• .success
• .warning

Icons

Иконка ставится перед input внутри label.

<label class="label">
  Search
  <i class="ph ph-magnifying-glass"></i>
  <input class="input" type="search" placeholder="Search">
</label>

Select

<label class="label">
  Status
  <div class="select-wrap">
    <select class="input select">
      <option>Draft</option>
      <option>Published</option>
    </select>
  </div>
</label>

Date & Time

Date/time поля остаются нативными, но всё поле кликабельно через data-date-picker.

<label class="label">
  Date
  <i class="ph ph-calendar-blank"></i>
  <input class="input input-date" type="date" value="2026-04-23" data-date-picker>
</label>

<label class="label">
  Time
  <i class="ph ph-clock"></i>
  <input class="input input-time" type="time" value="14:30" data-date-picker>
</label>

<label class="label">
  Date & time
  <i class="ph ph-calendar-dots"></i>
  <input class="input input-datetime" type="datetime-local" value="2026-04-23T14:30" data-date-picker>
</label>

InputPatterns.init() добавляет progressive enhancement через showPicker().

File Upload

Универсальный upload поддерживает накопительный выбор файлов, preview для изображений, file type cards для остальных файлов и удаление item-ов.

<div class="file-upload-panel">
  <form class="file-upload-form" 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 or images.</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>
  </form>
</div>

Behavior:

GNexusUIKit.InputPatterns.init();

Checkbox и Radio

<label class="checkbox">
  <input type="checkbox">
  <span class="checkbox-control" aria-hidden="true"></span>
  <span class="checkbox-label">Enabled</span>
</label>

<label class="radio">
  <input type="radio" name="mode">
  <span class="radio-control" aria-hidden="true"></span>
  <span class="radio-label">Manual</span>
</label>

Advanced Select

advancedSelect создается через JS и привязывается к input.

document.querySelector(".advanced-select-container").append(
  GNexusUIKit.advancedSelect(
    document.querySelector(".advanced-select-input"),
    {
      user_1: "Ada",
      user_2: "Grace"
    },
    "Nothing found"
  )
);

Editable String

Editable String подходит для inline-редактирования коротких значений: названия, slug, label, metadata.

<div class="editable-string" data-editable-string>
  <span class="editable-string-value">Release Plan</span>
  <button class="btn-icon editable-string-edit" type="button" aria-label="Edit">
    <i class="ph ph-pencil-simple"></i>
  </button>
</div>

Поведение находится в src/js/components/editable-string.js и доступно как:

GNexusUIKit.editableString

Используйте этот паттерн только для короткого inline-edit. Для длинного текста или сложной формы лучше открыть modal/drawer.