bukatchuk ui

Элементы

Поле пароля

Поле пароля с кнопкой «показать/скрыть»: состояние в aria-pressed, подпись кнопки и aria-label меняются.

password-input с версии 0.1.0 со скриптом

Примеры

Вход
<form action="#" method="post">
  <div class="field">
    <label class="field__label" for="pw-login">Пароль</label>
    <div class="password" data-ui-password>
      <input class="field__input password__input" type="password" id="pw-login" name="password" autocomplete="current-password" required>
      <button class="password__toggle" type="button" aria-pressed="false" aria-label="Показать пароль" aria-controls="pw-login">Показать</button>
    </div>
  </div>
</form>
Новый пароль с подсказкой

Не короче 10 символов.

<div class="field">
  <label class="field__label" for="pw-new">Новый пароль</label>
  <div class="password" data-ui-password>
    <input class="field__input password__input" type="password" id="pw-new" name="new_password" autocomplete="new-password" minlength="10" required aria-describedby="pw-new-h">
    <button class="password__toggle" type="button" aria-pressed="false" aria-label="Показать пароль" aria-controls="pw-new">Показать</button>
  </div>
  <p class="field__hint" id="pw-new-h">Не короче 10 символов.</p>
</div>

Установка

bukatchuk-ui add password-input

Вместе с компонентом установятся: tokens, fonts, base, core, field.

Файлы

ФайлНазначение
password-input.cssстили
password-input.jsскрипт
example.htmlобразец разметки, в проект не копируется
password-input.jinja.htmlвставка для Jinja

Клавиши

КлавишаДействие
Tabперейти от поля к кнопке
Enter / Spaceпоказать или скрыть пароль

Макрос для Jinja

{#- Поле пароля. autocomplete: current-password (вход) или new-password (регистрация, смена). -#}
{% macro password_input(name, label, autocomplete='current-password', hint=None, required=False, minlength=None, id=None) -%}
{%- set pid = id or ('pw-' ~ name) -%}
<div class="field">
  <label class="field__label" for="{{ pid }}">{{ label }}</label>
  <div class="password" data-ui-password>
    <input class="field__input password__input" type="password" id="{{ pid }}" name="{{ name }}" autocomplete="{{ autocomplete }}"{% if required %} required{% endif %}{% if minlength %} minlength="{{ minlength }}"{% endif %}{% if hint %} aria-describedby="{{ pid }}-h"{% endif %}>
    <button class="password__toggle" type="button" aria-pressed="false" aria-label="Показать пароль" aria-controls="{{ pid }}">Показать</button>
  </div>
  {%- if hint %}
  <p class="field__hint" id="{{ pid }}-h">{{ hint }}</p>
  {%- endif %}
</div>
{%- endmacro %}