# Pole tekstowe - TextField Jednowierszowe pole do wprowadzania tekstu. ![](https://content.gitbook.com/content/2CssJT0zIo4SJQLbSZ6l/blobs/dGysplFFfZmZvft7owVl/2_files/image2025-5-14_14-11-46.png) ✅ **Kiedy stosować:** * Dane mieszczą się w jednej linii (np. imię, nazwisko, PESEL). :x: **Kiedy nie stosować:** * Możliwe jest wpisanie więcej niż jednego zdania (np. opinia, uzasadnienie). **Stosuj**: [TextArea](https://docs.eximee.com/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/1-wprowadzanie-danych-inputs/obszar-tekstu-textarea). * Istnieje możliwość i sens użycia pola dedykowanego (np. PIN, numer telefonu, data). **Stosuj**: [PinField](https://docs.eximee.com/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/1-wprowadzanie-danych-inputs/komponent-pin-pinfield), [PhoneInput](https://docs.eximee.com/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/1-wprowadzanie-danych-inputs/numer-telefonu-phoneinput), [DatePicker](https://docs.eximee.com/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/1-wprowadzanie-danych-inputs/data-datepicker). ## Właściwości komponentu | Właściwość Eximee Designer | Nazwa atrybutu w Źródle | Opis | | ---------------------------------------------------------------------------------- | --------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Nieaktywne pole prezentowane jako etykieta** (sekcja **Podstawowe właściwości**) | labelIfDisabled |

Ustawione na true oznacza, że nieaktywny komponent wyświetlany jest jako pogrubiony tekst, bez wyszarzenia, obramowań i tła (na wniosku wygląda jak Etykieta). → wniosek demo: demoLabelIfDisabled

Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniach.

| | **Typ danych** (sekcja **Jakość danych**) | expectedType | Określenie typu wprowadzanych danych (dostępne formaty to: STRING, LONG, DOUBLE, URL, EMAIL.) w celu zmuszenia kanału mobilnego do wyświetlenia klawiatury zgodnej z tym typem (np. do wyświetlenia wyłącznie klawiatury numerycznej używamy typu LONG). | | **Formatowanie w czasie rzeczywistym** (sekcja **Jakość danych**) | formatterRealTime | Określa czy formatowanie ma następować po naciśnięciu przycisku na klawiaturze, czy dopiero po wyjściu z danego pola. Domyślna wartość "false". | | **Walidacja po każdym znaku** (sekcja **Jakość danych**) | validationOnEverySign | Pozwala na wywołanie walidacji (tylko wymagalność pola oraz maska) na komponencie po każdym wprowadzonym znaku. Wartość domyślna komponentu 'false'. Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniach. | | **Licznik znaków** (sekcja **Jakość danych**) | characterCounter | Jeżeli ustawione na true, pod polem powinien się pokazywać licznik ile znaków zostało wpisanych. Jeżeli dodatkowo pole ma ustawione **Maksymalną liczbę znaków**, to ta informacja również się pojawi. Pokazanie się błędów walidacji ukrywa licznik. Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniach. | | **Autouzupełnianie dla pustego pola** (sekcja **Jakość danych**) | autocompleteForEmptyField | Umożliwia wyświetlenie podpowiedzi po samym wejściu na pole tekstowe. Umożliwia wybór jednej z opcji lub wpisanie ręcznie wyboru. Dla pola tekstowego, które ma wyświetlać podpowiedzi, zaznaczamy checkbox **Autouzupełnianie dla pustego pola** z sekcji **Jakość danych**. Podpinamy zewnętrzne źródło danych, co opisane jest niżej w sekcji **Autouzupełnianie - zasilenie podpowiedzi.** | | **Minimalna liczba znaków wywołująca podpowiedzi** (sekcja **Jakość danych**) | minLengthToAutocomplete |

Minimalna liczba znaków dla których uruchomiony zostanie mechanizm wywołujący podpowiedzi (autocompleter). Wartość 0 oznacza brak tego mechanizmu.

Żeby funkcjonalność działała poprawnie flaga autoServerUpdate musi być ustawiona na "false". Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniach.

| | **Dodatkowa opcja w liście (klucz)** (sekcja **Jakość danych**) | autocompleteNoMatchButtonLabelKey | Klucz tłumaczeń, którego wartość jest wyświetlana w dodatkowym przycisku wyświetlanym na liście podpowiedzi autouzupełniania, który pozwala klientowi oznajmić, że nie znalazł on odpowiedniej opcji w domenie. Przycisk na kliknięcie emituje akcję AUTOCOMPLETE\_NO\_MATCH\_BUTTON\_CLICKED. Sterowanie widocznością przycisku opisane jest niżej w sekcji **Autouzupełnianie - zasilenie podpowiedzi**. Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniach. | | **Filtruj listę podpowiedzi** (sekcja **Jakość danych**) | autocompleteOptionsFilterEnabled | Flaga definiująca, czy w przypadku zasilenia listy podpowiedzi autouzupełniania z usługi (EDS) mają być one platformowo filtrowane na podstawie wpisanego w pole tekstu. Ustawienie na false pozwala zawrzeć całą, specyficzną dla danego przypadku logikę podpowiadania w usłudze. Przy ustawieniu wartości na false wartość wpisana przez klienta jest przekazywana automatycznie do serwisu zasilającego podpowiedzi w postaci parametru o kluczu `__searchText` (nawet jeśli nie zdefinujemy tego parametru wejściowego dla usługi zasilającej), który można wykorzystać w usłudze do implementacji własnej logiki filtrowania. Domyślna wartość: true. Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniach. | | **Wyświetl przycisk czyszczenia pola** (sekcja **Stylizacja**) | showClearButton |

Flaga mówiąca, czy komponent ma wyświetlać przycisk służący do czyszczenia pola. Domyślna wartość: false.

Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniach.

| | **Maksymalna liczba znaków** (sekcja **Jakość danych**) | maxLength | Określenie maksymalnej liczby znaków. | | **Maska** (sekcja **Jakość danych**) | mask | Maska *REGEX* walidująca pole. Więcej w [Walidacje proste](https://docs.eximee.com/budowanie-aplikacji/interfejs-uzytkownika/formularze/praca-z-komponentami-bazowymi/walidacja-wartosci-komponentow/walidacje-proste-wbudowane). | | **Komunikat błędu dopasowania do maski** (sekcja **Jakość danych**) | maskValidationError | Etykieta błędu w przypadku wartości niezgodnej z maską. | | **Prezentacja maski** (sekcja **Jakość danych**) | visibleMask |

Umożliwia projektantowi szablonu zdefiniowanie formatu, w jakim mają zostać wprowadzone dane do pola tekstowego. Maska umożliwia definiowanie określonych typów pól za pomocą następujących znaków:

W masce ponadto można umieścić pożądany separator, np. "-", "/". Przykładowe maski:

Więcej informacji tutaj: Walidacje proste

| | **Warunek widoczności prefiksu** (sekcja **Jakość danych**) | prefixVisibleCondition | Określa czy i kiedy prezentować prefiks. Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniach. | | **Prefiks** (sekcja **Jakość danych**) | prefix | Tekst do wyświetlenia w prefiksie. | | **Sufiks** (sekcja **Jakość danych**) | suffix | Tekst do wyświetlenia w sufiksie. | | **Placeholder** (sekcja **Jakość danych**) | placeholderText | Tekst wyświetlany jako placeholder pola, domyślnie jest to wartość pusta. Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniach. | | **Formater** (sekcja **Jakość danych**) | formatter | Nazwa formatera używanego dla pola. | | **Opis pola** (sekcja **Jakość danych**) | description | Tekst wyświetlany jako opis pola poniżej niego, domyślnie jest to wartość pusta. Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniach. | | **Maska danych sensytywnych** (sekcja **Bezpieczeństwo**) | sensitiveDataMask | Określenie typu stosowanej maski dla wprowadzanych wartości np. danych sensytywnych (dostępne typy to: NO\_MASK, PESEL, ID\_NUMBER, CELL\_PHONE\_NUMBER, PHONE\_NUMBER). Typem domyślnym jest NO\_MASK, dla którego nie stosujemy maskowania danych sensytywnych. Maskowaniu może podlegać jedynie wartość pochodząca ze **Źródła danych z innego pola**. Przykłady działania: [Maska danych sensytywnych](https://docs.eximee.com/budowanie-aplikacji/interfejs-uzytkownika/formularze/praca-z-komponentami-bazowymi/walidacja-wartosci-komponentow/maska-danych-sensytywnych) Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniach. | | **Niedopuszczanie niedozwolonych znaków podpowiedzi** (sekcja **Bezpieczeństwo**) | forbidIllegalValues | Domyślna wartość "false". | | **Możliwość wklejania** (sekcja **Bezpieczeństwo**) | pasteEnabledCondition | Warunkowe wklejanie do pola (jeśli ustawimy wartość pola na "false", nie będzie możliwe wklejanie wartości ze schowka do pola). | | **Hasło** (sekcja **Bezpieczeństwo**) | password | Ustawione na "true" oznacza, że zamiast wpisywanych znaków w polu pojawią się kropki (tj. wpisywane hasło nie będzie widoczne). Domyślna wartość "false". | | **Ikona** (sekcja **Stylizacja**) | iconUrl |

Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniach. Umożliwia wyświetlanie ikony w polu tekstowym. Należy podać adres do ikony w postaci urla lub ścieżki do pliku. Akceptowane formaty pliku png, jpg, svg.

| > 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)

Ilustracja 1. Przykładowy wygląd komponentu z pomocą kontekstową.

Ilustracja 2. Przykładowy wygląd nieaktywnego komponentu na wniosku.

Ilustracja 3. Przykładowy wygląd komponentu z prefiksem i prezentacją maski.

Ilustracja 4. Przykładowy wygląd komponentu z opcją Hasła.

Ilustracja 5. Przykładowy wygląd komponentu z opisem pola, placeholderem i licznikiem znaków.

Ilustracja 6. Przykładowy wygląd komponentu z ustawioną wymagalnością.

Ilustracja 7. Przykładowy wygląd komponentu z ikoną.

*** ## Autouzupełnianie - zasilenie podpowiedzi Chcąc zasilić komponent z włączonym autouzupełnianiem listą podpowiedzi należy podpiąć pod niego Źródło Danych Zewnętrznych (EDS), którym może być słownik, bądź usługa. ## **Zasilenie z usługi** ### **Parametry wejściowe** W przypadku zasilenia podpowiedzi z usługi usługa ta może dostawać informacje na temat wartości wpisanej w pole lub wartość z innego pola. Wartość ta może być przekazywana jako parametr wejściowy usługi o kluczu `__searchText` i wykorzystana w skrypcie. Zatem, aby móc filtrować dziedzinę wyszukiwania wartością wpisaną w pole tekstowe należy w ServiceProxy zdefiniować parametr wejściowy o nazwie `__searchText` (nazwa rozpoczyna się od dwóch znaków podkreślenia). Parametru tego nie trzeba w żaden sposób podpinać w kontrolce z poziomu Eximee Designer. ### **Parametry wyjściowe** Wyjście usługi należy podpiąć pod odpowiednie parametry komponentu. | Nazwa atrybutu w Źródle | Opis | | ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | autocompleteValue | Kolejne wartości do wyświetlenia na liście podpowiedzi. | | showAutocompleteNoMatchButton | Opcjonalna flaga, mówiąca, czy na liście podpowiedzi wyświetlić dodatkowy przycisk (opisany w ramach właściwości autocompleteNoMatchButtonLabelKey). Domyślnie wartość false. Dostępność funkcjonalności zależy od licencji i może nie być dostępna we wszystkich wdrożeniach. | | descriptionText | Dodatkowa wartość prezentowana razem z autocompleteValue. | *** {% hint style="info" %} Wniosek demo: demoKomponentyTekstowe oraz demoTekstowe Wniosek demo w wybranych wdrożeniach: textFieldIcon {% endhint %} {% hint style="info" %} ♿WCAG: [Dobre praktyki WCAG dla low-code dev](https://docs.eximee.com/budowanie-aplikacji/proces-biznesowy/tworzenie-procesu-biznesowego-w-bpmn-2.0/dobre-praktyki) {% endhint %}