# 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="https://1082717226-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2Fgit-blob-7632cb46436a46105ac73266ceeadd84812cbff7%2FpinInput1.png?alt=media" 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](https://docs.eximee.com/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/1-wprowadzanie-danych-inputs/pole-tekstowe-textfield).

## 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](https://docs.eximee.com/budowanie-aplikacji/interfejs-uzytkownika/formularze/praca-z-komponentami-bazowymi/wspolne-wlasciwosci-komponentow)

## Wygląd komponentu

<figure><img src="https://content.gitbook.com/content/2CssJT0zIo4SJQLbSZ6l/blobs/bukWTp5aYHEeYRUBAs3P/17k_files/image2024-10-8_16-17-45.png" alt=""><figcaption><p><em><strong>Ilustracja 1.</strong> Wygląd komponentu na formularzu.</em></p></figcaption></figure>

<figure><img src="https://1082717226-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2FgFcAtgJqsTVVeDdrEn0p%2Fobraz.png?alt=media&#x26;token=7c5803cd-1db2-4d77-8012-7235ca080946" alt=""><figcaption><p><em><strong>Ilustracja 2.</strong> Wygląd komponentu dla 4-cyfrowego kodu.</em></p></figcaption></figure>

<figure><img src="https://1082717226-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2Fgit-blob-c3fa080053257ec43ae064551fdfd2c60cbbf4a7%2FpinInput2.png?alt=media" 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 %}