Элементы

Числовое поле

Число с кнопками «−» и «+»: шаг, min и max с самого поля, быстрый набор при удержании кнопки.

Примеры

<form action="#" method="post">
  <div class="field">
    <label class="field__label" for="num-size">Участников во встрече</label>
    <div class="number number--sm" data-ui-number>
      <button class="number__btn" type="button" data-ui-step="-1" tabindex="-1" aria-label="Уменьшить" aria-controls="num-size">−</button>
      <input class="number__input" type="number" id="num-size" name="size" value="10" min="2" max="50" step="1" inputmode="numeric" aria-describedby="num-size-h">
      <button class="number__btn" type="button" data-ui-step="1" tabindex="-1" aria-label="Увеличить" aria-controls="num-size">+</button>
    </div>
    <p class="field__hint" id="num-size-h">От 2 до 50. Удерживайте кнопку, чтобы менять число быстрее.</p>
  </div>
</form>

<div class="field">
  <label class="field__label" for="num-gap">Перерыв между встречами</label>
  <div class="number number--sm" data-ui-number>
    <button class="number__btn" type="button" data-ui-step="-1" tabindex="-1" aria-label="Уменьшить" aria-controls="num-gap">−</button>
    <input class="number__input" type="number" id="num-gap" name="gap" value="15" min="0" max="60" step="5" inputmode="numeric">
    <span class="number__unit" aria-hidden="true">мин</span>
    <button class="number__btn" type="button" data-ui-step="1" tabindex="-1" aria-label="Увеличить" aria-controls="num-gap">+</button>
  </div>
</div>

Установка

bukatchuk-ui add number-input

Файлы

Варианты

Клавиши

Макрос для Jinja

{#- Числовое поле с кнопками. Шаг, min и max задаются у поля; unit — подпись единицы внутри рамки.
    Без скрипта остаётся обычное числовое поле, кнопки ничего не делают. -#}
{% macro number_input(name, label, value=None, min=None, max=None, step=1, unit=None, hint=None, id=None, small=True) -%}
{%- set nid = id or ('num-' ~ name) -%}
<div class="field">
  <label class="field__label" for="{{ nid }}">{{ label }}</label>
  <div class="number{% if small %} number--sm{% endif %}" data-ui-number>
    <button class="number__btn" type="button" data-ui-step="-1" tabindex="-1" aria-label="Уменьшить" aria-controls="{{ nid }}">−</button>
    <input class="number__input" type="number" id="{{ nid }}" name="{{ name }}"{% if value is not none %} value="{{ value }}"{% endif %}{% if min is not none %} min="{{ min }}"{% endif %}{% if max is not none %} max="{{ max }}"{% endif %} step="{{ step }}" inputmode="numeric"{% if hint %} aria-describedby="{{ nid }}-h"{% endif %}>
    {%- if unit %}<span class="number__unit" aria-hidden="true">{{ unit }}</span>{% endif %}
    <button class="number__btn" type="button" data-ui-step="1" tabindex="-1" aria-label="Увеличить" aria-controls="{{ nid }}">+</button>
  </div>
  {%- if hint %}
  <p class="field__hint" id="{{ nid }}-h">{{ hint }}</p>
  {%- endif %}
</div>
{%- endmacro %}