> 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/pole-tekstowe-textfield.md). # Pole tekstowe - TextField Jednowierszowe pole do wprowadzania tekstu. ![](/files/ccc0bc2337499eb66973ddc8bf572dbde7aea285) ✅ **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](/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/1-wprowadzanie-danych-inputs/obszar-tekstu-textarea.md). * Istnieje możliwość i sens użycia pola dedykowanego (np. PIN, numer telefonu, data). **Stosuj**: [PinField](/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/1-wprowadzanie-danych-inputs/komponent-pin-pinfield.md), [PhoneInput](/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/1-wprowadzanie-danych-inputs/numer-telefonu-phoneinput.md), [DatePicker](/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/1-wprowadzanie-danych-inputs/data-datepicker.md). ## 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.

| | **Wyświetl maksymalną liczbę dozwolonych znaków** (sekcja **Jakość danych**) | showMaxLength |

Flaga mówiąca, czy komponent ma wyświetlać maksymalną liczbę dozwolonych znaków.

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](/budowanie-aplikacji/interfejs-uzytkownika/formularze/praca-z-komponentami-bazowymi/walidacja-wartosci-komponentow/walidacje-proste-wbudowane.md). | | **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](/budowanie-aplikacji/interfejs-uzytkownika/formularze/praca-z-komponentami-bazowymi/walidacja-wartosci-komponentow/maska-danych-sensytywnych.md) 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](/budowanie-aplikacji/interfejs-uzytkownika/formularze/praca-z-komponentami-bazowymi/wspolne-wlasciwosci-komponentow.md)

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](/budowanie-aplikacji/proces-biznesowy/tworzenie-procesu-biznesowego-w-bpmn-2.0/dobre-praktyki.md) {% 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/pole-tekstowe-textfield.md?ask= ``` 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.