> For the complete documentation index, see [llms.txt](https://docs.eximee.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.eximee.com/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/1-wprowadzanie-danych-inputs/komponent-pin-pinfield.md).

# Komponent PIN - PinField

{% hint style="info" %}
Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniach.
{% endhint %}

Komponent służący do wpisywania kodu PIN. Obecnie wspiera 4- lub 6-cyfrowe kody. Liczba cyfr w komponencie jest zależna od wdrożenia. Wartość komponentu jest wysyłana po uzupełnieniu całego PIN-u; wtedy również następuje walidacja.

<figure><img src="/files/BY3FtqaSJO9MSvF93fOE" alt=""><figcaption></figcaption></figure>

✅ **Kiedy stosować:**

* Gdy wymagane jest wprowadzenie danych o ściśle określonej liczbie znaków (np. 4-cyfrowy kod PIN logowania lub 6-cyfrowy kod SMS do autoryzacji).
* Gdy ze względów bezpieczeństwa chcesz wprowadzić maskowanie wprowadzanych znaków (komponent pozwala na maskowanie cyfr kropkami).

:x: Kiedy nie stosować:

Gdy długość wprowadzanego ciągu znaków jest zmienna (np. hasło do konta o długości od 8 do 20 znaków). **Stosuj**: [TextField](/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/1-wprowadzanie-danych-inputs/pole-tekstowe-textfield.md).

## Właściwości komponentu

| Właściwość                                               | Opis                                                                                                                                                                                                                                                                                                                                                  |
| -------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Etykieta ARIA** (sekcja **WCAG**)                      | Właściwość odpowiadająca oddzielonym przecinkami atrybutom `aria-label` poszczególnych inputów składających się na komponent PIN. Domyślnie "1,2,3,4,5,6". Aby dać użytkownikowi korzystającemu z czytnika ekranowego świadomość bycia w kontrolce PIN, może być potrzebne zmodyfikowanie tej wartości, np. na "kontrolka pin 1,kontrolka pin 2,...". |
| **Maskowanie znaków w polu** (sekcja **Bezpieczeństwo**) | Zaznaczenie opcji "Maskowanie znaków w polu" we właściwościach komponentu (sekcja Bezpieczeństwo) powoduje zastąpienie wpisywanych znaków kropkami w widoku pola.                                                                                                                                                                                     |

> Więcej informacji o właściwościach komponentu: [Wspólne właściwości komponentów](/budowanie-aplikacji/interfejs-uzytkownika/formularze/praca-z-komponentami-bazowymi/wspolne-wlasciwosci-komponentow.md)

## Wygląd komponentu

<figure><img src="/files/7db216e74a36d822e9487691fa504148eaf475dd" alt=""><figcaption><p><em><strong>Ilustracja 1.</strong> Wygląd komponentu na formularzu.</em></p></figcaption></figure>

<figure><img src="/files/tYqAqBvgjtfnRH7kjE4d" alt=""><figcaption><p><em><strong>Ilustracja 2.</strong> Wygląd komponentu dla 4-cyfrowego kodu.</em></p></figcaption></figure>

<figure><img src="/files/bt3Ry7cUJGdTLHk6hwaP" alt=""><figcaption><p><em><strong>Ilustracja 3.</strong> Wygląd komponentu z maskowaniem znaków.</em></p></figcaption></figure>

{% hint style="info" %}
Wniosek demo: demoPin
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.eximee.com/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/1-wprowadzanie-danych-inputs/komponent-pin-pinfield.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.