Элементы

Поле

Подпись, поле ввода, многострочное поле, системный список, подсказка и сообщение об ошибке.

Примеры

<label class="field">
  <span class="field__label">Название встречи</span>
  <input class="field__input" type="text" name="title" value="Планёрка отдела разработки">
  <span class="field__hint">Название увидят все участники.</span>
</label>

<label class="field">
  <span class="field__label">Описание</span>
  <textarea class="field__input" name="description" rows="3">Обсуждаем план релиза и распределение дежурств.</textarea>
</label>
<label class="field">
  <span class="field__label">Часовой пояс</span>
  <select class="field__input" name="timezone">
    <option value="Europe/Moscow" selected>Europe/Moscow</option>
    <option value="Asia/Yekaterinburg">Asia/Yekaterinburg</option>
    <option value="Asia/Novosibirsk">Asia/Novosibirsk</option>
  </select>
</label>

<label class="field">
  <span class="field__label">Ссылка для гостей</span>
  <input class="field__input" type="text" value="https://meet.bukatchuk.ru/planerka" readonly>
  <span class="field__hint">Ссылку нельзя изменить после создания встречи.</span>
</label>

<div class="field field--invalid">
  <label class="field__label" for="field-email">E-mail</label>
  <input class="field__input" type="email" id="field-email" value="ivanov@example" aria-invalid="true" aria-describedby="field-email-err">
  <span class="field__error" id="field-email-err">Адрес указан не полностью.</span>
</div>

<select class="field__input field__input--sm" name="role" aria-label="Роль Иванова">
  <option value="user" selected>Пользователь</option>
  <option value="admin">Администратор</option>
</select>

Установка

bukatchuk-ui add field

Файлы

Варианты

Вставка для Jekyll

{%- comment -%}
  Поле формы. Параметры: name, label, value, type (text | email | password | number), hint, error, required.
{%- endcomment -%}
<label class="field{% if include.error %} field--invalid{% endif %}">
  <span class="field__label">{{ include.label }}</span>
  <input class="field__input" name="{{ include.name }}" type="{{ include.type | default: 'text' }}" value="{{ include.value }}"{% if include.required %} required{% endif %}{% if include.error %} aria-invalid="true"{% endif %}>
  {%- if include.error %}<span class="field__error" role="alert">{{ include.error }}</span>{% endif %}
  {%- if include.hint %}<span class="field__hint">{{ include.hint }}</span>{% endif %}
</label>

Макрос для Jinja

{#- Поле формы. type: text | email | password | number | textarea; error подсвечивает поле и выводит сообщение. -#}
{% macro field(name, label, value='', type='text', hint='', error='', required=False, readonly=False, autocomplete='off', maxlength=None) -%}
<label class="field{% if error %} field--invalid{% endif %}">
  <span class="field__label">{{ label }}</span>
  {%- if type == 'textarea' %}
  <textarea class="field__input" name="{{ name }}" rows="3"{% if required %} required{% endif %}{% if readonly %} readonly{% endif %}>{{ value }}</textarea>
  {%- else %}
  <input class="field__input" name="{{ name }}" type="{{ type }}" value="{{ value }}" autocomplete="{{ autocomplete }}"{% if type in ('text', 'email') %} autocapitalize="none" spellcheck="false"{% endif %}{% if required %} required{% endif %}{% if maxlength %} maxlength="{{ maxlength }}"{% endif %}{% if readonly %} readonly{% endif %}{% if error %} aria-invalid="true"{% endif %}>
  {%- endif %}
  {%- if error %}<span class="field__error" role="alert">{{ error }}</span>{% endif %}
  {%- if hint %}<span class="field__hint">{{ hint }}</span>{% endif %}
</label>
{%- endmacro %}