Pole wyboru
Z łatwością zbieraj zgody i odpowiedzi wielokrotnego wyboru. Od prostych pól wyboru „tak/nie” po listy wielokrotnego wyboru z funkcją „Zaznacz wszystko”, sterowaniem wartościami min/maks i inteligentnymi układami – pole wyboru obsługuje pojedyncze zgody i pytania wielokrotnego wyboru, oferując zaawansowane funkcje walidacji i przyjazne dla użytkownika opcje.
Dwa tryby dla każdego pola wyboru
Idealny dla:
Potężne funkcje do każdego zastosowania
Dwa tryby wyboru
Tryb pojedynczego pola wyboru:
Jedno pole wyboru do pytań z odpowiedziami „tak/nie”, zgód lub opt-in. Idealne do akceptacji regulaminu, subskrypcji newsletterów i formularzy zgody.
Przypadków użycia:
- „Akceptuję regulamin”
- „Zapisz mnie do newslettera”
- „Tak, chcę otrzymywać aktualizacje”
- „Potwierdzam, że te informacje są dokładne”
Cechy:
- Niestandardowy tekst etykiety pola wyboru
- Domyślny stan zaznaczenia/odznaczenia
- Wartość niestandardowa (tak, 1, prawda, itd.)
- Wymagana opcja walidacji
Tryb wielu pól wyboru:
Wiele opcji, w których użytkownicy mogą wybrać kilka odpowiedzi. Idealne do pytań typu „Zaznacz wszystkie pasujące”, zbierania preferencji i ankiet z wieloma odpowiedziami.
Przypadków użycia:
- „Które funkcje Cię interesują?” (wiele opcji do wyboru)
- „Wybierz preferowaną metodę kontaktu”
- „Wybierz wszystkie usługi, których potrzebujesz”
- „Jakie tematy Cię interesują?” (zaznacz kilka)
Cechy:
- Nieograniczone opcje pól wyboru
- Trzy style układu
- Opcja „Zaznacz wszystko”
- Minimalne/maksymalne limity wyboru
- „Inne” z możliwością wprowadzania tekstu
- Opcja ekskluzywna „Żadna z powyższych”
🎨 Trzy opcje układu (tryb wielokrotny)
Układ pionowy (układ warstwowy):
Pola wyboru pojawiają się po jednym w każdym wierszu, ułożone pionowo. Najbardziej czytelny układ dla dłuższych etykiet opcji.
Najlepszy dla:
- Długi tekst opcji
- 3-10 opcje
- Formularze mobilne
- Maksymalna czytelność
Układ poziomy (obok siebie):
Pola wyboru pojawiają się w rzędzie, obok siebie. Kompaktowy układ dla krótkich etykiet.
Najlepszy dla:
- 2-5 krótkich opcji
- Formy kompaktowe
- Układy pulpitu
- Wydajność przestrzeni
Układ siatki (wiele kolumn):
Pola wyboru rozmieszczone w siatce dwukolumnowej. Zrównoważony układ, oszczędzający miejsce i zapewniający czytelność.
Najlepszy dla:
- 4-12 opcje
- Etykiety średniej długości
- Zrównoważony projekt
- Profesjonalny wygląd
Reaktywne zachowanie:
Wszystkie układy automatycznie dostosowują się do ekranów urządzeń mobilnych, układając się w stosy w razie potrzeby, co zapewnia lepszą interakcję dotykową.
✨ Opcja „Zaznacz wszystko”
Wybór jednym kliknięciem:
Dodaj specjalne pole wyboru „Zaznacz wszystko” na górze listy. Użytkownicy mogą zaznaczyć/odznaczyć wszystkie opcje jednym kliknięciem.
Inteligentne zachowanie:
- Sprawdza wszystkie standardowe opcje jednocześnie
- Odznacz wszystkie po ponownym kliknięciu
- Automatycznie odznacza, jeśli jakakolwiek opcja jest odznaczona
- Pokazuje stan nieokreślony, gdy wybrane są niektóre (nie wszystkie) opcje
- Wyklucza opcję „Żadna z powyższych” z opcji „Zaznacz wszystko”
Idealne dla:
- Długie listy pól wyboru (5+ opcji)
- Formularze, w których użytkownicy często wybierają wszystko
- Pytania „Zaznacz wszystkie, które mają zastosowanie”
- Wybór uprawnień i funkcji
Doświadczenie użytkownika:
Oszczędza czas na długich listach. Użytkownicy mogą zaznaczyć wszystkie, a następnie odznaczyć konkretne wyjątki.
✏️ Opcja „Inne” z możliwością wprowadzania tekstu
Zbiór niestandardowych odpowiedzi:
Dodaj pole wyboru „Inne”, które po zaznaczeniu wyświetla pole tekstowe. Użytkownicy mogą określić własną odpowiedź, jeśli domyślne opcje nie pasują.
Jak To Działa:
- Pole wyboru „Inne” pojawia się na dole listy
- Po zaznaczeniu pojawi się pole wprowadzania tekstu
- Użytkownicy wpisują niestandardową odpowiedź
- Zarówno zaznaczenie pola wyboru, jak i tekst są przesyłane
Przypadków użycia:
- „Preferowana metoda kontaktu: …Inna (proszę określić)”
- „Zainteresowania: …Inne tematy”
- „Skąd się o nas dowiedziałeś/aś: …Inne źródło”
- Każda lista, która nie może współistnieć
Korzyści:
Rejestruje nieoczekiwane odpowiedzi, zapewnia elastyczność, zapobiega „wymuszonemu dopasowaniu” wyborów i poprawia jakość danych.
❌ Opcja „Żadna z powyższych”
Wyłączny brak wyboru:
Dodaj opcję „Żadna z powyższych”, która automatycznie odznacza wszystkie inne opcje po kliknięciu.
Inteligentna ekskluzywność:
- Po zaznaczeniu opcji „Brak” wszystkie pozostałe opcje zostaną automatycznie odznaczone
- Jeśli zaznaczona jest jakakolwiek inna opcja, opcja „Brak” jest automatycznie odznaczana
- Zapewnia jasny sposób wskazania, że żaden wybór nie ma zastosowania
- Zapobiega sprzecznym wyborom
Przypadków użycia:
- Opcjonalne pytania preferencyjne
- „Zaznacz wszystkie alergie: …Żadna z powyższych”
- Kontrolery kwalifikacji
- Wybór zainteresowań
Dlaczego warto uwzględnić:
Zapobiega porzucaniu formularzy, wykazuje dokładność, zapewnia wyraźną opcję odmowy i poprawia dokładność danych.
📊 Kontrola wyboru min./maks.
Wybór kontroli ilości:
Ustaw minimalną i maksymalną liczbę pól wyboru, które muszą/mogą zostać zaznaczone.
Minimalny wybór:
Wymagaj od użytkowników wybrania co najmniej X opcji. Formularz nie zostanie wysłany, dopóki wymaganie nie zostanie spełnione.
Przykłady:
- „Wybierz co najmniej 2 zainteresowania” (min. 2)
- „Wybierz co najmniej 3 preferencje” (Min: 3)
- „Wybierz co najmniej 1 opcję” (Min: 1)
Maksymalna liczba wyborów:
Ogranicz użytkowników do wyboru nie więcej niż X opcji. Pola wyboru są wyłączane po osiągnięciu limitu.
Przykłady:
- „Wybierz 3 najważniejsze cechy” (maks. 3)
- „Wybierz do 5 usług” (maks.: 5)
- „Wybierz nie więcej niż 2 opcje” (maks.: 2)
Wyczyść opinię:
Użytkownicy widzą komunikaty weryfikacyjne, takie jak „Wybierz co najmniej 2 opcje” lub „Dozwolone są maksymalnie 3 wybory”.
🔧 Łatwe zarządzanie opcjami
Pełna kontrola nad wyborami:
- Dodaj opcje – wpisz i naciśnij Enter lub kliknij „Dodaj opcję”. Twórz listy pól wyboru w kilka sekund.
- Opcje edycji – aktualizuj wyświetlany tekst (to, co widzą użytkownicy) i wartości (to, co zostało przesłane) niezależnie.
- Domyślnie zaznaczone – wstępnie zaznacz określone pola wyboru, zaznaczając pole wyboru obok każdej opcji.
- Opcje zmiany kolejności – Użyj strzałek w górę/w dół, aby ułożyć pola wyboru w idealnej kolejności.
- Usuń opcje – usuń niechciane opcje jednym kliknięciem.
Wyświetlanie a wartość:
- Etykieta: Co widzą użytkownicy (np. „Aktualizacje e-mail”)
- Wartość: Co jest przechowywane (np. „email_updates”)
Budowa masowa:
Szybko dodawaj wiele opcji, wpisując, naciskając Enter, wpisując, naciskając Enter – szybkie tworzenie listy pól wyboru.
☑️ Funkcje pojedynczego pola wyboru
Opcje dostosowywania:
Tekst etykiety pola wyboru:
Tekst wyświetlany obok pola wyboru. Niech będzie jasny i konkretny (np. „Wyrażam zgodę na otrzymywanie wiadomości e-mail o charakterze marketingowym”).
Domyślny stan zaznaczenia:
Zaznacz pole wyboru podczas ładowania formularza. Używaj go ostrożnie – użytkownicy powinni świadomie zaznaczać pola zgody.
Wartość przesłana niestandardowo:
Ustaw wartość, która zostanie przesłana po zaznaczeniu (zazwyczaj „tak”, „1” lub „prawda”). Domyślnie jest to „tak”.
Wymagana walidacja:
Ustaw pole wyboru jako obowiązkowe. Użytkownicy muszą je zaznaczyć, aby wysłać formularz. Idealne w przypadku wymaganych zgód.
🔀 Logika warunkowa
Dynamiczna widoczność pól wyboru:
Pokaż lub ukryj pola wyboru na podstawie innych wartości formularza. Wyświetlaj opcje tylko wtedy, gdy są istotne.
Zaawansowane zasady logiki:
Logika AND – wszystkie warunki muszą być spełnione
Logika OR – dowolny warunek może wywołać akcję
8 operatorów – Równe, Nierówne, Większe niż, Mniejsze niż, Zawiera, Jest puste i więcej
Przypadków użycia:
Pokaż pola wyboru „Preferencje wysyłki” tylko wtedy, gdy zaznaczona jest opcja „Wymaga wysyłki”
Wyświetlaj „Tematy biuletynu”, gdy zaznaczone jest pole wyboru subskrypcji
Pokaż „Dodatkowe usługi”, gdy typ usługi jest równy „Premium”
Ukryj „Opcje rabatowe”, gdy łączna wartość zamówienia jest mniejsza niż 50 USD
🎯 Ulepszone wrażenia użytkownika
Wbudowane inteligentne funkcje:
- Wskaźniki wizualne – Wyczyść pola wyboru, zachowując odpowiednie odstępy
- Nawigacja za pomocą klawiatury – łatwe przechodzenie między opcjami za pomocą klawisza Tab
- Przyjazny dla dotyku – duże cele dotykowe dla urządzeń mobilnych
- Domyślne wybory – wstępne zaznaczenie określonych opcji
- Niestandardowe klasy CSS – stosowanie stylów do grup pól wyboru
- Wsparcie dostępności – etykiety ARIA, zgodność z czytnikiem ekranu
- Zoptymalizowane pod kątem urządzeń mobilnych – idealne rozmiary pól wyboru dla funkcji dotykowych
- Czytelne etykiety – czytelny tekst z odpowiednim wyrównaniem
- Wymagana walidacja – Wyczyść komunikaty o błędach
- Tekst pomocy – dodaj opisy do złożonych grup pól wyboru
Prosta konfiguracja w 3 krokach
Przygotuj pole wyboru w kilka minut
Dodaj pole wyboru
Przeciągnij i upuść pole Pole wyboru z sekcji Pola podstawowe do formularza.
Wybierz tryb
Wybierz opcję „Pojedyncze pole wyboru” w przypadku pytań z odpowiedziami tak/nie lub „Wiele pól wyboru” w przypadku pytań z odpowiedziami wielokrotnego wyboru.
Konfiguruj opcje
W przypadku pojedynczego pola wyboru: ustaw etykietę i wartość. W przypadku wielu pól wyboru: dodaj opcje, wybierz układ, opcjonalnie włącz opcje „Zaznacz wszystko” lub „Inne” oraz ustaw minimalną/maksymalną liczbę zaznaczeń.
???? Gotowe! Twoje pole wyboru jest gotowe i posiada inteligentną walidację.
Aplikacje w świecie rzeczywistym
Umowy i zgody
* Akceptacja regulaminu
* Umowy dotyczące polityki prywatności
* Wyrażenie zgody na otrzymywanie wiadomości e-mail
* Subskrypcje newslettera
Ankiety i opinie
* Pytania typu „Zaznacz wszystkie pasujące odpowiedzi”
* Wybór wielu zainteresowań
* Kolekcja preferencji funkcji
* Wybór tematów, które Cię interesują
E-Commerce
* Wybór funkcji produktu
* Dodatki serwisowe
* Opcje wysyłki
* Preferencje dotyczące powiadomień
Formularze rejestracyjne
* Preferencje komunikacyjne
* Kategorie zainteresowań
* Ustawienia uprawnień
* Wybór dostępu do funkcji
Zastosowania
* Kontrolery kwalifikacji
* Wybór umiejętności
* Obszary zainteresowań
* Opcje dostępności
Ustawienia i preferencje
* Ustawienia konta
* Opcje prywatności
* Wybór powiadomień
* Przełączniki funkcji
Uzupełnij opcje pól
Podstawowa konfiguracja
- Etykieta pola – pytanie lub tytuł wyświetlany nad polami wyboru
- Opis/Tekst pomocy – Dodatkowe wskazówki dla użytkowników
- Pole wymagane – Ustaw pole(a) wyboru jako obowiązkowe
- Symbol zastępczy – nie dotyczy pól wyboru
Tryb pola wyboru
Wybierz typ trybu:
- Pojedyncze pole wyboru – pytanie typu „tak/nie”, zgoda lub opcja „opt-in” (jedno pole wyboru)
- Wiele pól wyboru – opcje wielokrotnego wyboru (wiele pól wyboru)
Opcje pojedynczego pola wyboru
- Tekst obok pola wyboru – etykieta wyświetlana obok pola wyboru (np. „Akceptuję warunki”)
- Rozpocznij zaznaczone – pole wyboru jest wstępnie zaznaczone podczas ładowania formularza
- Wartość po zaznaczeniu – wartość danych zapisywana po zaznaczeniu (domyślnie: „tak”)
Opcje wielu pól wyboru
Styl układu:
- Ułożone w stos (jeden w wierszu) – układ pionowy
- Obok siebie (w rzędzie) – układ poziomy
- Siatka (wiele kolumn) – układ siatki 2-kolumnowej
Opcje pola wyboru:
Utwórz listę wyborów:
- Tekst wyświetlany – co widzą użytkownicy (np. „E-mail”)
- Wartość – co jest przesyłane (np. „e-mail”)
- Domyślnie zaznaczone – wstępnie wybierz określone opcje
- Zmień kolejność – przenieś opcje w górę/w dół
- Usuń – Usuń opcje
Opcje specjalne:
- Dodaj opcję „Zaznacz wszystko” – dodaje pole wyboru u góry, które umożliwia zaznaczenie/odznaczenie wszystkich opcji
- Dodaj opcję „Inne” z polem tekstowym – Dodaje opcję „Inne” z polem tekstowym dla niestandardowych odpowiedzi
- Dodaj opcję „Żadna z powyższych” – dodaje opcję wyłączną, która po wybraniu odznacza wszystkie inne
Ograniczenia wyboru:
- Minimalna wymagana liczba zaznaczeń – najmniejsza liczba pól wyboru, które muszą zostać zaznaczone (np. 2)
- Maksymalna liczba dozwolonych wyborów – większość pól wyboru, które można zaznaczyć (np. 5)
Logika warunkowa
- Włącz logikę warunkową – pokaż/ukryj na podstawie warunków
- Typ logiczny
- Wszystkie warunki muszą być spełnione (ORAZ)
- Każdy warunek może być spełniony (LUB)
- Zasady warunkowe
- Pokaż/Ukryj – działanie do podjęcia
- Pole – Które pole należy sprawdzić
- Operator – Równy, Nierówny, Zawiera, Większy niż, Mniejszy niż, Jest pusty, Nie jest pusty
- Wartość – wartość porównawcza
- Wiele warunków – dodawaj nieograniczoną liczbę reguł
Opcje zaawansowane
- Ukryte pole – uczyń pole niewidocznym (niezalecane w przypadku pól wyboru)
- Niestandardowe klasy CSS – zastosuj niestandardowy styl
- Atrybuty dostępności – etykiety ARIA dla czytników ekranu
Dlaczego warto wybrać nasze pole wyboru?
✅ Dwa tryby – Pojedyncze pole wyboru lub wiele pól wyboru w jednym typie pola
✅ Elastyczne układy – Układy pionowe, poziome lub siatkowe
✅ Zaznacz wszystko – Wybór jednym kliknięciem dla wygody
✅ Inna opcja – Wprowadzanie tekstu dla niestandardowych odpowiedzi
✅ Opcja Brak – Wyłączny wybór bez wyboru
✅ Limity min./maks. – Kontrola ilości selekcji
✅ Łatwe zarządzanie – Dodawaj, edytuj, zmieniaj kolejność i usuwaj opcje bez wysiłku
✅ Przyjazny użytkownikowi – Czytelne etykiety, odpowiednie odstępy, przyjazne dla dotyku
✅ W pełni zintegrowany – Współpracuje bezproblemowo ze wszystkimi funkcjami formularza
Najczęściej zadawane pytania
P: Jaka jest różnica pomiędzy trybem pojedynczego i wielokrotnego pola wyboru?
Tryb pojedynczy wyświetla jedno pole wyboru dla odpowiedzi „tak”/„nie”. Tryb wielokrotny wyświetla kilka pól wyboru, w których użytkownicy mogą zaznaczyć więcej niż jedną opcję.
P: Czy użytkownicy mogą zaznaczyć wszystkie pola wyboru jednocześnie?
Tak. Włącz opcję „Zaznacz wszystko”, aby dodać pole wyboru, które zaznacza lub odznacza wszystkie opcje jednym kliknięciem.
P: Jak działa selekcja min./maks.?
Minimum zapewnia użytkownikom wybór co najmniej określonej liczby opcji. Maksimum ogranicza liczbę pól wyboru, które mogą zaznaczyć.
P: Co robi opcja „Inne”?
Dodaje dodatkowe pole wyboru oznaczone etykietą „Inne”. Po zaznaczeniu pojawia się pole tekstowe, w którym użytkownicy mogą wpisać własną odpowiedź.
P: Jak działa opcja „Żadna z powyższych”?
Działa jako wybór wyłączny. Po zaznaczeniu wszystkie pozostałe pola wyboru zostają odznaczone. Jeśli zaznaczona jest jakakolwiek inna opcja, opcja „Brak” automatycznie się odznacza.
P: Czy mogę wstępnie zaznaczyć niektóre pola wyboru?
Tak. W trybie pojedynczym włącz opcję „Rozpocznij zaznaczone”. W trybie wielokrotnym zaznacz małe pole wyboru obok każdej opcji, którą chcesz wybrać jako domyślnie zaznaczoną.
P: Czy powinienem wstępnie zaznaczyć pola umowy?
Nie. W przypadku zasad, warunków i zgód użytkownicy powinni sami zaznaczyć odpowiednie pole.
P: Czy mogę zmienić kolejność pól wyboru?
Tak. Użyj strzałek w górę i w dół obok każdej opcji, aby zmienić ich kolejność według własnego uznania.
P: Jaka jest różnica między tekstem wyświetlanym a wartością?
Tekst wyświetlany to to, co widzą użytkownicy. Wartość to to, co jest przechowywane w bazie danych, aby zapewnić czyste i spójne dane.
P: Czy mogę stosować logikę warunkową w przypadku pól wyboru?
Tak. Aktywuj inne pola na podstawie wyborów za pomocą operatorów takich jak „Równa się”, „Jest pusta” lub „Nie jest pusta”.
P: Jak utworzyć wymagane pole wyboru?
Włącz „Pole wymagane”. W trybie pojedynczym pole musi być zaznaczone. W trybie wielokrotnym użytkownicy muszą wybrać co najmniej jedną opcję lub spełnić minimalne wymagania.
P: Czy użytkownicy mogą zmienić swoje wybory po sprawdzeniu?
Tak. Mogą swobodnie zaznaczyć lub odznaczyć dowolne opcje przed wysłaniem formularza. Opcję „Zaznacz wszystko” można również w dowolnym momencie przełączyć.
