Формы

Поле и его обвязка

<div class="gr-field">
  <label class="gr-label" for="mail">Почта</label>
  <input class="gr-input" id="mail" type="email" aria-describedby="mail-hint">
  <span class="gr-hint" id="mail-hint">Пришлём подтверждение.</span>
</div>

Состояния

<div class="gr-field">
  <label class="gr-label" for="promo">Промокод</label>
  <input class="gr-input" id="promo" type="text" value="OSEN30"
         aria-invalid="false" aria-describedby="promo-ok">
  <span class="gr-success" id="promo-ok">Скидка 30 % применена к заказу.</span>
</div>

<div class="gr-field">
  <label class="gr-label" for="phone">Телефон</label>
  <input class="gr-input" id="phone" type="tel" required aria-describedby="phone-hint">
  <span class="gr-hint" id="phone-hint">Обязательное поле — по нему свяжется курьер.</span>
</div>

Размеры

.gr-input, .gr-textarea и .gr-select — одна семья элементов управления: общая высота, общий кегль, общие состояния. Поэтому и размер у них задаётся одной парой классов, на любом из трёх.

Группа с аддонами

.gr-input-group склеивает поле с подписью или кнопкой: скругления остаются на краях, соседние границы наезжают друг на друга на свою толщину, а сфокусированный элемент поднимается над соседями, чтобы контур фокуса не оказался наполовину закрыт.

<div class="gr-input-group">
  <span class="gr-input-addon">₽</span>
  <input class="gr-input" type="number" aria-label="Сумма">
</div>

Края считаются по видимым полям. Скрытые потомки — <input type="hidden">, узел с атрибутом hidden, <template>, <script>, <datalist> — на вид группы не влияют, где бы они ни стояли: полное значение составного поля в скрытом поле, признак формы первым ребёнком, панель подсказки, которую живой поиск дописывает внутрь группы. Это допустимая разметка, а не обход.

<div class="gr-input-group">
  <select class="gr-select" aria-label="Код страны"><option>+7</option></select>
  <input class="gr-input" type="tel" aria-label="Номер">
  <input type="hidden" name="telephone">   <!-- последний ребёнок, но не край -->
</div>

Выбор даты и времени

Ответ по умолчанию — нативное <input type="date">, и это не пробел. Локализация, разбор введённого, клавиатура, работа со скринридером и мобильный календарь там уже есть — и сделаны платформой лучше, чем их сделал бы виджет на разметке. Библиотеке остаётся оформить поле, и она это делает без единого нового класса: .gr-input работает на дате ровно так же, как на тексте. Второй путь — виджет data-gr-datetime из второго бандла слоя — существует и назван ниже, в подразделе «С подключённым griffinjs-fields.js», вместе со своей платой; заменой нативного поля он не является: на телефоне он и сам уступает системному календарю.

Ни один селектор семьи не ограничен типом поля, поэтому дате и времени достаются и рамка с фоном, и фокус, и :user-invalid, и [aria-invalid], и :disabled, и оба размера, и группа с аддонами.

<div class="gr-field">
  <label class="gr-label" for="from">Дата заезда</label>
  <input class="gr-input" id="from" type="date" required
         min="2026-01-01" aria-describedby="from-hint">
  <span class="gr-hint" id="from-hint">Не раньше начала года.</span>
</div>

Плата

Нативное поле — не «замена похуже», но и не бесплатное решение. Что именно вы отдаёте, лучше знать до того, как макет разойдётся с результатом.

Диапазон «от — до»

Пара дат — это два поля и одно правило между ними. База без скрипта — два нативных поля: границу задаёт разметка через min и max, платформа проверит введённое и сама пометит поле недействительным. С подключённым бандлом полей поля связываются одним атрибутом — data-gr-datetime="to: #b" на первом: значение «с» становится min у «по», значение «по» — max у «с», и панель одного показывает отрезок до другого. Подробности — в подразделе «Диапазон „с — по“» ниже.

<div class="gr-flex gr-gap-sm">
  <div class="gr-field gr-flex-1 gr-min-w-0">
    <label class="gr-label" for="a">С</label>
    <input class="gr-input" id="a" type="date" max="2026-12-31">
  </div>
  <div class="gr-field gr-flex-1 gr-min-w-0">
    <label class="gr-label" for="b">По</label>
    <input class="gr-input" id="b" type="date" max="2026-12-31">
  </div>
</div>

.gr-min-w-0 на колонках обязателен, а не для красоты: у флекс-элемента минимальная ширина по умолчанию равна ширине содержимого, а собственная ширина поля даты в Blink — около 154 px. Без него пара полей не сожмётся ниже своей суммы и уведёт страницу вбок на узком экране.

Флажок, радиокнопка, переключатель

<label class="gr-choice gr-choice-start">
  <input class="gr-checkbox" type="checkbox" required>
  <span>Я прочитал условия использования и политику обработки персональных данных и согласен с ними</span>
</label>

<label class="gr-choice gr-choice-row">Подписка на рассылку <input class="gr-switch" type="checkbox"></label>

Сегментный переключатель

Ряд взаимоисключающих вариантов из обычной радиогруппы. Стрелки ← → переключают выбор — это даёт платформа, скрипта не нужно. Оформляется <fieldset>, поэтому у группы есть имя: <legend> или aria-label.

<fieldset class="gr-segmented" aria-label="Период">
  <label><input type="radio" name="period" value="d" checked><span>День</span></label>
  <label><input type="radio" name="period" value="w"><span>Неделя</span></label>
</fieldset>

Имя группы можно дать и <legend> — штатным способом <fieldset>, в том числе скрытым с экрана: края и внутренние рамки считаются по ярлыкам (label:first-of-type, label:last-of-type), а не по любым потомкам, поэтому ни <legend> первым, ни скрытое поле или <script> последним сегменты не ломают.

<fieldset class="gr-segmented">
  <legend class="gr-sr-only">Тема оформления</legend>
  <label><input type="radio" name="theme" value="auto" checked><span>Как в системе</span></label>
  <label><input type="radio" name="theme" value="light"><span>Светлая</span></label>
  <label><input type="radio" name="theme" value="dark"><span>Тёмная</span></label>
</fieldset>

Выбор цвета и размера

Карточке товара нужны радио, которые выглядят не как радио: кружок цвета и плашка размера. Разметка — та же строка выбора, что и у флажка: <label class="gr-choice">, внутри <input class="gr-radio"> и образец следом — .gr-swatch для цвета, .gr-swatch-tag для плашки. Форма, клавиатура и объявление состояния остаются платформенными: стрелки переключают выбор внутри группы, Tab входит в неё один раз.

Цвет образца — переменная на элементе, style="--gr-swatch: …": цвет товара — данные страницы, а не оформление, и в библиотеке от него не остаётся ни одного литерала. Цвет — не подпись: у радио обязателен aria-label (и title на строке даст ту же подсказку под курсором). Группе нужно имя — role="radiogroup" с aria-labelledby или <fieldset>.

<div class="gr-flex gr-flex-items-center gr-gap-sm" role="radiogroup" aria-labelledby="color-label">
  <span class="gr-text-sm gr-text-ink-secondary" id="color-label">Цвет</span>
  <label class="gr-choice" title="Чёрный">
    <input class="gr-radio" type="radio" name="color" value="black" checked aria-label="Чёрный">
    <span class="gr-swatch" style="--gr-swatch: #1f1f1f"></span>
  </label>
  <label class="gr-choice" title="Песочный">
    <input class="gr-radio" type="radio" name="color" value="sand" aria-label="Песочный">
    <span class="gr-swatch" style="--gr-swatch: #d9c3a0"></span>
  </label>
</div>

<div class="gr-flex gr-flex-items-center gr-flex-wrap gr-gap-sm" role="radiogroup" aria-labelledby="size-label">
  <span class="gr-text-sm gr-text-ink-secondary" id="size-label">Размер</span>
  <label class="gr-choice"><input class="gr-radio" type="radio" name="size" value="s"><span class="gr-swatch-tag">S</span></label>
  <label class="gr-choice"><input class="gr-radio" type="radio" name="size" value="m" checked><span class="gr-swatch-tag">M</span></label>
  <label class="gr-choice"><input class="gr-radio" type="radio" name="size" value="xl" disabled><span class="gr-swatch-tag">XL</span></label>
</div>

Выбранный кружок получает кольцо акцента с просветом цвета подложки — на нём одинаково читаются и белый образец, и образец цвета акцента; выбранная плашка заливается акцентом. Сама радио остаётся в потоке, размером в пиксель и прозрачной, и прячется правилом с :has(): там, где его нет (Firefox до 121), правило не применяется вовсе, и радио остаётся видимой рядом с образцом — группа работает, только выглядит проще. display: none снял бы и клавиатуру, и эту деградацию.

Ползунок

.gr-range — оформление обычного <input type="range">: фильтр цены в каталоге, громкость, доля. Элемент не подменяется и здесь: клавиатура, шаг, min, max и участие в форме остаются платформенными.

<label class="gr-label" for="volume">Громкость</label>
<input class="gr-range" id="volume" type="range" min="0" max="100" value="65">

Примеры использования

Целые формы уже разобраны в соседних главах: экран входа — на Sizing, ритм стопки полей — на Spacing. Здесь — сюжеты про сами контролы: ошибка, которую видно и слышно, поисковая строка с аддоном, пароль с кнопкой «показать», страница настроек на тогглах, фильтр цены и счётчик количества.

Ошибка от сервера: видно и слышно

Сервер отверг значение — поле получает aria-invalid="true" (граница краснеет сама), а текст ошибки встаёт под ним на месте подсказки: .gr-hint .gr-text-danger. Связь между ними — aria-describedby: без него скринридер прочитает «поле неверно», но не скажет почему. Пока ошибки нет, в том же месте живёт обычный серый .gr-hint — вёрстка не прыгает.

<div class="gr-field">
  <label class="gr-label" for="promo">Промокод</label>
  <input class="gr-input" id="promo" type="text" value="LETO25"
         aria-invalid="true" aria-describedby="promo-err">
  <p class="gr-hint gr-text-danger" id="promo-err">Промокод истёк 1 августа.</p>
</div>

Когда ошибки красит скрипт после ответа сервера, ему проще ставить состояние на обёртку: .gr-field[data-gr-state="error"] красит все вложенные контролы, и список «поле → сообщение» из ответа ложится в одну строку на поле. aria-invalid при этом остаётся на контроле — для программы чтения с экрана, а не для рамки. Виджет data-gr-validate второго бандла ставит оба сам.

// ответ сервера: { promo: 'Промокод истёк 1 августа.' }
for (const [name, message] of Object.entries(errors)) {
  const control = form.elements[name];
  control.closest('.gr-field').dataset.grState = 'error';   // рамка
  control.setAttribute('aria-invalid', 'true');             // читалка
  control.nextElementSibling.textContent = message;         // .gr-error рядом
}

Поиск с кнопкой и подсказкой символа

Строка поиска или поле суммы: аддоны несут статичный контекст (₽, «в месяц», лупа-символ), кнопка завершает группу. Всё это — .gr-input-group: скругления по внешним углам, общая граница, фокус поднимается над соседями. Мелкий шрифт аддона и placeholder делают иерархию сами — дополнительных классов не нужно.

<div class="gr-input-group">
  <span class="gr-input-addon">⌕</span>
  <input class="gr-input" type="search" placeholder="Поиск по заказам" aria-label="Поиск по заказам">
  <button class="gr-btn gr-btn-primary">Найти</button>
</div>

Пароль: показать и скрыть

Поле пароля и кнопка рядом — та же .gr-input-group, что у поиска. Кнопка — переключатель: aria-pressed держит состояние, подпись говорит, что случится по нажатию. Переключают три строки на странице: type поля, aria-pressed и текст кнопки. Виджета здесь нет и не нужно — ради трёх строк заводить data-gr-* значило бы платить за них каждому, кто подключил слой. Значение при смене type остаётся на месте во всех трёх движках; autocomplete="current-password" оставляет менеджеру паролей его подсказку.

<div class="gr-input-group">
  <input class="gr-input" id="pass" type="password" autocomplete="current-password">
  <button class="gr-btn" type="button" aria-pressed="false"
          onclick="const f = this.previousElementSibling, on = f.type === 'password';
                   f.type = on ? 'text' : 'password';
                   this.setAttribute('aria-pressed', on);
                   this.textContent = on ? 'Скрыть' : 'Показать'">Показать</button>
</div>

Страница настроек на тогглах

Список настроек — строки «подпись слева, тумблер справа». Каждая строка — .gr-choice с модификатором .gr-choice-row: блочный флекс во всю ширину, подпись и .gr-switch разведены по краям; .gr-py-3 .gr-border-b дают ритм и разделители. Кликается вся строка — это даёт сам label. До 0.26.0 то же собиралось из .gr-w-full .gr-flex-between, и рецепт по-прежнему работает — но требует пакета утилит.

<div style="max-width: 26rem">
  <label class="gr-choice gr-choice-row gr-py-3 gr-border-b">
    Уведомления о заказах <input class="gr-switch" type="checkbox" checked>
  </label>
  <label class="gr-choice gr-choice-row gr-py-3 gr-border-b">
    Письма о новинках <input class="gr-switch" type="checkbox">
  </label>
  <label class="gr-choice gr-choice-row gr-py-3">
    Тёмная тема <input class="gr-switch" type="checkbox" checked>
  </label>
</div>

Фильтр цены в каталоге

Ползунок задаёт верхнюю границу, поле рядом показывает и принимает то же число: одно значение, два способа его ввести. Ни один из них не главный — и связывает их та пара строк скрипта, которую пишет потребитель. Библиотеке здесь принадлежит только вид: .gr-range, .gr-input-group с аддоном валюты и .gr-field как обёртка. Со слоем griffinjs.js эти строки не пишутся: связку берёт на себя параметр fields виджета — ниже.

<div class="gr-field">
  <label class="gr-label" for="price">Цена, до</label>
  <input class="gr-range" id="price" type="range" min="0" max="20000" step="500" value="8000">
  <div class="gr-input-group">
    <input class="gr-input gr-input-sm" id="price-num" type="number" value="8000" aria-label="Цена, до">
    <span class="gr-input-addon gr-input-sm">₽</span>
  </div>
</div>

С подключённым griffinjs.js

Закраска пройденного пути

Один атрибут на самом ползунке. Без скрипта у WebKit след не появляется, а сам ползунок работает как работал; в Firefox след есть в обоих случаях — его рисует платформа.

<input class="gr-range" type="range" min="0" max="100" value="65" data-gr-range>

Пара «от — до»

.gr-range-pair — два обычных ползунка в одной ячейке сетки. Дорожка и закрашенный отрезок принадлежат самой обёртке, а ползунки отдают ей всё, кроме ручек: наложением отрезок не собрать — дорожка полупрозрачна намеренно, оттенок currentcolor ложится на любую подложку, и верхняя дорожка не закрыла бы акцент нижней, а лишь притенила бы его.

Скрипту остаётся порядок значений: ручка, которую тянут за чужую границу, толкает вторую перед собой. Пересечься им нельзя — отрезок между ними вывернулся бы наизнанку. Без скрипта пара выглядит серой дорожкой с двумя ручками, и обе работают — мышью и с клавиатуры.

<div class="gr-range-pair" data-gr-range>
  <input class="gr-range" type="range" min="0" max="20000" step="500" value="4000" aria-label="Цена от">
  <input class="gr-range" type="range" min="0" max="20000" step="500" value="12000" aria-label="Цена до">
</div>

Подпись под парой ведёт разметка страницы, а не библиотека: числа рядом с фильтром у каждого каталога свои — валюта, разряды, «плюс» на верхней границе. Слой сообщает о каждом движении событием griffin:change на обёртке; в нём уже наведён порядок, поэтому слушать его, а не input самих ползунков, — единственный надёжный способ показать числа: свой обработчик на ползунке отработает раньше толчка второй ручки и покажет значения до него.

pair.addEventListener('griffin:change', (e) => {
  out.textContent = `${e.detail.from} — ${e.detail.to} ₽`;
});

Пара и числовые поля

У фасета цены ползунок и числа обязаны жить вместе: потянул ручку — число обновилось; вписал число — ручка уехала; форма отправляет одно значение, а не два. Параметр fields связывает пару с полями одним атрибутом — селекторов столько же, сколько ползунков, через запятую. Логику порядка при этом не переписывает никто: она та же, что у ручек.

Форму отправляют поля. name стоит у <input type="number">, у ползунков его нет — иначе в адрес уехали бы четыре параметра. Без скрипта остаются два рабочих числовых поля; со скриптом ползунок ложится поверх. Правда — в полях: страница вернулась с параметрами в них, и на монтаже ручки встают по полям, а пустое поле ставит свою ручку на край. Само поле от монтажа не заполняется — «фильтр не задан» остаётся пустым, пока ручку не тронут.

Ввод в поле двигает ручку сразу, на input, с зажимом по min/max; порядок наводится на change — «1» по пути к «1000» иначе толкнул бы вторую ручку. Событие griffin:change приходит на обёртку и при вводе в поле, с тем же detail.

<div class="gr-range-pair" data-gr-range="fields: #price-min, #price-max">
  <input class="gr-range" type="range" min="0" max="20000" step="500" value="0" aria-label="Цена от">
  <input class="gr-range" type="range" min="0" max="20000" step="500" value="20000" aria-label="Цена до">
</div>
<div class="gr-flex gr-gap-sm">
  <input class="gr-input gr-input-sm gr-flex-1" id="price-min" type="number" name="price_min" min="0" max="20000" step="500" aria-label="Цена от">
  <input class="gr-input gr-input-sm gr-flex-1" id="price-max" type="number" name="price_max" min="0" max="20000" step="500" aria-label="Цена до">
</div>

Счётчик количества в корзине

«Минус — число — плюс» собирается из того же .gr-input-group, что и поисковая строка: кнопки по краям, поле посередине, .gr-text-center ставит число в середину. Поле — настоящий <input type="number"> с min, max и step: количество уезжает вместе с формой, а на телефоне inputmode="numeric" открывает цифровую клавиатуру. Кнопкам нужен aria-label — «плюс» и «минус» знаками скринридер прочитает как пунктуацию.

Прибавляют и убавляют родные методы поля — stepUp() и stepDown(): они уважают min, max и step, поэтому ниже единицы счётчик не уйдёт и выше сотни не поднимется. Библиотеке для этого добавлять нечего — кнопке остаётся позвать метод у соседа. Счётчики в демонстрации рабочие, нажмите.

Системные стрелки у поля при этом снимает .gr-input-no-spin: рядом с парой кнопок они второй орган управления тем же числом — вдвое мельче «плюса» и вплотную к нему. Класс, а не автоматика по соседству с кнопкой: разметка нигде не говорит, что кнопка рядом шаговая, и группа «число + Применить» осталась бы без единственного способа шагнуть мышью. Клавиатуры это не касается — ↑ и ↓ шагают по значению и без видимых стрелок.

<div class="gr-input-group" style="max-width: 9rem">
  <button class="gr-btn" type="button" aria-label="Убрать одну штуку"
          onclick="this.nextElementSibling.stepDown()">−</button>
  <input class="gr-input gr-input-no-spin gr-text-center" type="number"
         inputmode="numeric" value="1" min="1" max="99" aria-label="Количество">
  <button class="gr-btn" type="button" aria-label="Добавить одну штуку"
          onclick="this.previousElementSibling.stepUp()">+</button>
</div>

Счётчик у границы: кнопка гаснет сама

Счётчик выше на единице не гаснет: stepDown() просто не даёт значению уйти ниже min, а кнопка остаётся нажимаемой и молчащей. Для корзины этого мало — «минус» на единице должен выглядеть недоступным. Гасит его ваш код: библиотека про остатки на складе и про минимальную партию ничего не знает.

Ниже — тот же счётчик с max="5", чтобы граница была в двух нажатиях, и с делегированным обработчиком на всю группу вместо двух атрибутов: в списке товаров счётчиков десятки, и вешать на каждый по паре обработчиков незачем. Он же шлёт change — сами шаговые методы события не шлют.

function grQty(group) {
  const input = group.querySelector('input');
  const minus = group.querySelector('[data-step="-1"]');
  const plus  = group.querySelector('[data-step="1"]');

  const sync = () => {
    minus.disabled = Number(input.value) <= Number(input.min);
    plus.disabled  = Number(input.value) >= Number(input.max);
  };

  group.addEventListener('click', (event) => {
    const button = event.target.closest('[data-step]');
    if (!button) return;

    button.dataset.step === '1' ? input.stepUp() : input.stepDown();
    input.dispatchEvent(new Event('change', { bubbles: true }));
  });

  input.addEventListener('input', sync);
  input.addEventListener('change', sync);
  sync();
}

С подключённым griffinjs-fields.js

Телефон: код страны и маска

Список кодов — из разметки или из таблицы стран griffinjs-countries.js; имя страны и флаг — у платформы, в языке страницы. Без скрипта — type="tel" и тот же список в группе.

<div class="gr-input-group" data-gr-phone="country: ru">
  <select class="gr-select" name="code" aria-label="Код страны"></select>
  <input class="gr-input" type="tel" name="phone" autocomplete="tel-national">
</div>

Дата: второй путь и его плата

Разметка — то же нативное поле, что выше. На тач-устройстве виджет её не трогает: системный календарь остаётся, и решает это pointerType каждого события. На указателе мыши тип подменяется на text, надевается маска по локали из lang документа — формат наконец ваш, а не браузера, — открывается панель, а ISO уходит в скрытый спутник с прежним именем. Плата: на текстовом поле платформа не проверяет min и max — проверяет виджет через setCustomValidity, сообщение о границах берёт у платформы, о невозможной дате — своё.

<input class="gr-input" type="date" name="from" min="2026-01-01" required data-gr-datetime>

Диапазон «с — по»

Пара нативных полей из раздела «Диапазон „от — до“», связанная атрибутом to на первом. Значение «с» — min у «по», значение «по» — max у «с»: проверка границ, сообщения и недоступные дни в панели работают тем же путём, что у одиночного поля. Пустое поле открывает панель на месяце соседа, дни между концами помечены в обеих панелях. На тач-устройстве работает только связка границ — системный календарь скрывает недоступное сам. Авторская граница остаётся, если она уже; очистка возвращает её.

<input class="gr-input" id="a" type="date" name="since" data-gr-datetime="to: #b">
<input class="gr-input" id="b" type="date" name="until" data-gr-datetime>

Сумма с разрядами

Отдельное поле, а не маска: type="number" разрядов не показывает, inputmode не форматирует, а маска знает только фиксированные слоты. На экране — «1 250 000,50» по локали документа, в скрытом спутнике с прежним именем — 1250000.50; разряды встают на ходу, каретка держится за той же цифрой, вставка «1 250 000,50» и «1250000.50» читается одинаково. Валюта и единица — в аддоне рядом. База без скрипта — обычное текстовое поле: сервер получит то, что набрано, и разбор на сервере обязателен в любом случае.

<div class="gr-input-group">
  <input class="gr-input" type="text" inputmode="decimal" name="amount" min="0" data-gr-number="decimals: 2">
  <span class="gr-input-addon">₽</span>
</div>

Счётчик символов

<textarea class="gr-textarea" maxlength="200" data-gr-counter="format: {left} из {max}"></textarea>

Сводка ошибок вместо пузыря

<form data-gr-validate>
  …
  <button class="gr-btn gr-btn-primary" type="submit">Отправить</button>
</form>