> For the complete documentation index, see [llms.txt](https://v1-6-0.pipui.ru/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://v1-6-0.pipui.ru/components/tabindex.md).

# Индексы полей ввода

Иногда бывает так, что появляется необходимость управлять индексами полей ввода. Казалось бы, что для этого неплохо подойтет атрибут tabindex, однако помимо данного атрибута учитываются и другие встроенные компоненты, например ссылки или адресная строка.

Именно из-за таких ситуаций и был разработан данный компонент, который выступает ограничителем.

Атрибут <mark style="color:orange;">`[data-tabindex]`</mark> служит для определения блока в котором работают атрибуты <mark style="color:orange;">`[tabindex]`</mark>

```html
<form method="post" data-tabindex>
    <input type="text" name="name" tabindex="1" placeholder="tabindex=1">

    <input type="text" name="name" tabindex="2" placeholder="tabindex=2">

    <input type="text" name="name" tabindex="5" placeholder="tabindex=5">

    <input type="text" name="name" tabindex="3" placeholder="tabindex=3">

    <input type="text" name="name" tabindex="4" placeholder="tabindex=4">

    <div class="pt-20 text-center">
        <button type="submit" class="btn">Отправить</button>
    </div>
</form>
```

{% embed url="<https://codepen.io/pipui/pen/QWBdgWg>" %}
Пример работы кода выше
{% endembed %}