Kryssrutefält
Samla enkelt in avtal och flera val. Från enkla ja/nej-kryssrutor till flervalslistor med "Markera alla", min/max-kontroller och smarta layouter – kryssrutefältet hanterar enskilda avtal och flervalsfrågor med kraftfull validering och användarvänliga alternativ.
Två lägen för alla behov av kryssrutor
Perfekt för:
Kraftfulla funktioner för alla användningsfall
Två kryssrutelägen
Läge för enkel kryssruta:
En kryssruta för ja/nej-frågor, avtal eller anmälningar. Perfekt för godkännande av villkor, nyhetsbrevsprenumerationer och samtyckesformulär.
Använd fall:
- "Jag godkänner villkoren"
- "Prenumerera på nyhetsbrevet"
- "Ja, jag vill få uppdateringar"
- "Jag bekräftar att denna information är korrekt"
Funktioner:
- Anpassad text för kryssruteetikett
- Standardtillstånd för markerat/avmarkerat
- Anpassat inskickat värde (ja, 1, sant, etc.)
- Obligatoriskt valideringsalternativ
Läge för flera kryssrutor:
Flera alternativ där användare kan välja flera alternativ. Perfekt för frågor där man kan välja alla som gäller, preferensinsamling och flervalsundersökningar.
Använd fall:
- "Vilka funktioner intresserar dig?" (flera alternativ)
- "Välj dina föredragna kontaktmetoder"
- "Välj alla tjänster du behöver"
- "Vilka ämnen intresserar dig?" (markera flera)
Funktioner:
- Obegränsade kryssrutealternativ
- Tre layoutstilar
- Alternativet "Markera alla"
- Min/max urvalsgränser
- "Annat" med textinmatning
- Exklusivt alternativ "Inget av ovanstående"
🎨 Tre layoutalternativ (flera lägen)
Vertikal (staplad) layout:
Kryssrutorna visas en per rad, staplade vertikalt. Mest läsbara layout för längre alternativetiketter.
Bäst för:
- Lång alternativtext
- 3-10 alternativ
- Mobilt anpassade formulär
- Maximal läsbarhet
Horisontell (sida vid sida) layout:
Kryssrutorna visas i rad, sida vid sida. Kompakt layout för korta etiketter.
Bäst för:
- 2–5 korta alternativ
- Kompakta former
- Skrivbordslayouter
- Utrymmeseffektivitet
Rutnätslayout (flera kolumner):
Kryssrutor arrangerade i ett rutnät med två kolumner. Balanserad layout som sparar utrymme samtidigt som läsbarheten bibehålls.
Bäst för:
- 4-12 alternativ
- Medellånga etiketter
- Balanserad design
- Professionellt utseende
Responsivt beteende:
Alla layouter anpassar sig automatiskt till mobilskärmar och staplas vid behov för bättre interaktion med pekskärmen.
✨ Alternativet “Markera alla”
Val med ett klick:
Lägg till en särskild kryssruta för "Markera alla" högst upp i listan. Användare kan markera/avmarkera alla alternativ med ett klick.
Smart beteende:
- Kontrollerar alla vanliga alternativ samtidigt
- Avmarkerar alla när du klickar igen
- Avmarkerar automatiskt om något alternativ är avmarkerat
- Visar obestämt tillstånd när vissa (inte alla) alternativ är valda
- Exkluderar "Inget av ovanstående" från markera alla
Perfekt för:
- Långa kryssrutelistor (5+ alternativ)
- Formulär där användare ofta väljer allt
- "Markera alla som gäller"-frågor
- Val av behörighet och funktioner
Användarupplevelse:
Sparar tid på långa listor. Användare kan markera alla och sedan avmarkera specifika undantag.
✏️ Alternativet ”Annat” med textinmatning
Anpassad svarssamling:
Lägg till en kryssruta för "Annat" som visar ett textfält när det är valt. Användare kan ange sitt eget svar om förinställda alternativ inte passar.
Så fungerar det:
- Kryssrutan ”Annat” visas längst ner i listan
- När markeringen är markerad visas textinmatningsfältet
- Användare skriver in ett anpassat svar
- Både kryssruteval och text skickas
Använd fall:
- "Föredragen kontaktmetod: …Annat (vänligen specificera)"
- "Intressen: …Andra ämnen"
- "Hur fick du höra talas om oss: …Annan källa"
- Alla listor som inte kan
Fördelar:
Fångar oväntade svar, ger flexibilitet, förhindrar "tvångsanpassning" och förbättrar datakvaliteten.
❌ Alternativet "Inget av ovanstående"
Exklusivt icke-urval:
Lägg till alternativet "Inget av ovanstående" som automatiskt avmarkerar alla andra val när du klickar på det.
Smart exklusivitet:
- När "Ingen" är markerat avmarkeras alla andra alternativ automatiskt.
- När något annat alternativ är markerat avmarkeras "Ingen" automatiskt.
- Ger ett tydligt sätt att indikera att inga val gäller
- Förhindrar motsägelsefulla val
Använd fall:
- Valfria preferensfrågor
- "Välj alla allergier: …Inget av ovanstående"
- Kvalifikationskontrollanter
- Intresseval
Varför inkludera:
Förhindrar att formuläret överges, visar noggrannhet, ger ett uttryckligt negativt alternativ och förbättrar datanoggrannheten.
📊 Min/Max-valskontroller
Kontrollval Kvantitet:
Ange det minsta och högsta antalet kryssrutor som måste/kan markeras.
Minsta antal val:
Kräv att användarna väljer minst X alternativ. Formuläret skickas inte förrän kravet är uppfyllt.
Exempel:
- "Välj minst 2 intressen" (Minst: 2)
- "Välj minst 3 preferenser" (Min: 3)
- "Välj minst ett alternativ" (Min: 1)
Maximalt antal val:
Begränsa användarna till att välja högst X alternativ. Kryssrutorna inaktiveras när gränsen nås.
Exempel:
- "Välj dina 3 bästa funktioner" (Max: 3)
- "Välj upp till 5 tjänster" (Max: 5)
- "Välj högst 2 alternativ" (Max: 2)
Rensa feedback:
Användare ser valideringsmeddelanden som ”Vänligen välj minst 2 alternativ” eller ”Max 3 val tillåtna”.
🔧 Enkel hantering av alternativ
Full kontroll över val:
- Lägg till alternativ – Skriv och tryck på Enter eller klicka på ”Lägg till alternativ”. Skapa kryssrutelistor på några sekunder.
- Redigera alternativ – Uppdatera visningstext (vad användarna ser) och värden (vad som skickas in) oberoende av varandra.
- Standardmarkerad – Förmarkera specifika kryssrutor genom att markera rutan bredvid varje alternativ.
- Ändra ordningsalternativ – Använd uppåt-/nedåtpilarna för att ordna kryssrutorna i perfekt ordning.
- Ta bort alternativ – Ta bort oönskade alternativ med ett klick.
Visning kontra värde:
- Etikett: Vad användarna ser (t.ex. ”E-postuppdateringar”)
- Värde: Vad som lagras (t.ex. ”email_updates”)
Massivbyggnad:
Lägg till flera alternativ snabbt genom att skriva, trycka på Enter, skriva och trycka på Enter – snabbt skapa en kryssrutelista.
☑️ Funktioner för en enda kryssruta
Anpassningsalternativ:
Text för kryssrutans etikett:
Texten som visas bredvid kryssrutan. Gör den tydlig och specifik (t.ex. ”Jag godkänner att ta emot marknadsföringsmejl”).
Standardkontrollerat tillstånd:
Förkryssa i rutan när formuläret laddas. Använd försiktigt – användare bör medvetet kryssa i rutor för överenskommelse.
Anpassat inskickat värde:
Ange vilket värde som skickas när det är markerat (vanligtvis "ja", "1" eller "sant"). Standardvärdet är "ja".
Nödvändig validering:
Gör kryssrutan obligatorisk. Användare måste markera den för att skicka in formuläret. Perfekt för obligatoriska avtal.
🔀 Villkorlig logik
Dynamisk synlighet av kryssrutor:
Visa eller dölj kryssrutefält baserat på andra formulärvärden. Visa alternativ endast när det är relevant.
Avancerade logiska regler:
OCH-logik – Alla villkor måste vara uppfyllda
ELLER-logik – vilket villkor som helst kan utlösa åtgärden
8 operatorer – Lika med, Inte lika med, Större än, Mindre än, Innehåller, Är tom och mer
Använd fall:
Visa kryssrutorna för "Leveransinställningar" endast när "Kräver frakt" är markerat.
Visa "Nyhetsbrevsämnen" när kryssrutan för prenumeration är markerad
Visa "Ytterligare tjänster" när tjänstetypen är lika med "Premium"
Dölj "Rabattalternativ" när ordertotalen är mindre än 50 USD
🎯 Förbättrad användarupplevelse
Inbyggda smarta funktioner:
- Visuella indikatorer – Avmarkera kryssrutorna med rätt avstånd
- Tangentbordsnavigering – Bläddra enkelt igenom alternativen
- Pekvänlig – Stora tryckmarkeringar för mobil
- Standardval – Förhandskontrollera specifika alternativ
- Anpassade CSS-klasser – Använd formatering på kryssrutegrupper
- Tillgänglighetsstöd – ARIA-etiketter, kompatibel med skärmläsare
- Mobiloptimerad – Perfekta kryssrutestorlekar för pekskärmar
- Tydliga etiketter – Läsbar text med korrekt justering
- Validering krävs – Rensa felmeddelanden
- Hjälptext – Lägg till beskrivningar för komplexa kryssrutegrupper
Enkel installation i 3 steg
Få ditt kryssrutefält klart på några minuter
Lägg till kryssrutefält
Dra och släpp kryssrutefältet från avsnittet Grundläggande fält till ditt formulär.
Välj läge
Välj ”En kryssruta” för ja/nej-frågor eller ”Flera kryssrutor” för flervalsalternativ.
Konfigurera alternativ
För enskild: ange kryssrutans etikett och värde. För flera: lägg till alternativ, välj layout, aktivera alternativen "Markera alla" eller "Annat" och ange min/max-val.
???? Det var allt! Ditt kryssrutefält är klart med smart validering.
Verkliga applikationer
Avtal och samtycke
* Godkännande av villkor
* Avtal om integritetspolicy
* Samtyckesalternativ via e-post
* Nyhetsbrevsprenumerationer
Undersökningar och feedback
* Frågor som gäller genom att välja alla alternativ
* Val av flera intressen
* Samling av funktioner
* Val av ämnesintresse
E-handel
* Val av produktfunktioner
* Tillägg till tjänster
* Fraktalternativ
* Aviseringsinställningar
Registreringsblanketter
* Kommunikationsinställningar
* Intressekategorier
* Behörighetsinställningar
* Val av funktionsåtkomst
Tillämpningar
* Kvalifikationskontrollanter
* Färdighetsval
* Intresseområden
* Tillgänglighetsalternativ
Inställningar och preferenser
* Kontoinställningar
* Sekretessalternativ
* Val av aviseringar
* Funktionsväxlare
Alternativ för kompletta fält
Grundläggande konfiguration
- Fältetikett – Frågan eller titeln som visas ovanför kryssrutorna
- Beskrivning/hjälptext – Ytterligare vägledning för användare
- Obligatoriskt fält – Gör kryssrutan/kryssrutorna obligatoriska
- Platshållare – Gäller inte för kryssrutor
Kryssruteläge
Välj lägestyp:
- En kryssruta – Ja/Nej-fråga, godkännande eller anmälan (en kryssruta)
- Flera kryssrutor – Flervalsalternativ (flera kryssrutor)
Alternativ för en enda kryssruta
- Text bredvid kryssruta – Etikett som visas bredvid kryssrutan (t.ex. ”Jag godkänner villkoren”)
- Starta markerad – Kryssrutan är förmarkerad när formuläret laddas
- Värde vid markering – Datavärde lagras vid markering (standard: "ja")
Flera kryssrutealternativ
Layoutstil:
- Staplad (en per rad) – Vertikal placering
- Sida vid sida (i rad) – Horisontellt arrangemang
- Rutnät (flera kolumner) – rutnätslayout med två kolumner
Alternativ för kryssrutor:
Skapa din lista med val:
- Visningstext – Vad användarna ser (t.ex. ”E-post”)
- Värde – Vad som skickas in (t.ex. ”e-post”)
- Standardmarkerad – Förvälj specifika alternativ
- Ändra ordning – Flytta alternativ uppåt/nedåt
- Ta bort – Ta bort alternativ
Specialalternativ:
- Lägg till alternativet "Markera alla" – Lägger till kryssruta högst upp som markerar/avmarkerar alla alternativ
- Lägg till alternativet "Annat" med textruta – Lägger till alternativet "Annat" med textfält för anpassade svar
- Lägg till alternativet "Inget av ovanstående" – Lägger till ett exklusivt alternativ som avmarkerar alla andra när de väljs.
Urvalsgränser:
- Minsta antal val som krävs – Minsta antal kryssrutor som måste markeras (t.ex. 2)
- Maximalt antal tillåtna val – De flesta kryssrutor som kan väljas (t.ex. 5)
Villkorad logik
- Aktivera villkorlig logik – Visa/dölj baserat på villkor
- Logik typ
- Alla villkor måste vara uppfyllda (OCH)
- Vilket villkor som helst kan uppfyllas (ELLER)
- Villkorsregler
- Visa/Dölj – Åtgärd att vidta
- Fält – Vilket fält som ska kontrolleras
- Operator – Lika med, Inte lika med, Innehåller, Större än, Mindre än, Är tom, Är inte tom
- Värde – Jämförelsevärde
- Flera villkor – Lägg till obegränsat antal regler
Avancerade alternativ
- Dolt fält – Gör fältet osynligt (rekommenderas inte för kryssrutor)
- Anpassade CSS-klasser – Använd anpassad styling
- Tillgänglighetsattribut – ARIA-etiketter för skärmläsare
Varför välja vårt kryssrutefält?
✅ Två lägen – En kryssruta eller flera kryssrutor i en fälttyp
✅ Flexibla layouter – Vertikala, horisontella eller rutnätsbaserade arrangemang
✅ Markera allt – Val med ett klick för enkelhetens skull
✅ Annat alternativ – Textinmatning för anpassade svar
✅ Inget alternativ – Exklusivt icke-urvalsval
✅ Min/Max-gränser – Kontrollvalskvantitet
✅ Enkel hantering – Lägg till, redigera, ändra ordning och ta bort alternativ utan ansträngning
✅ Användarvänlig – Tydliga etiketter, korrekt avstånd, beröringsvänlig
✅ Fullt integrerad – Fungerar sömlöst med alla formulärfunktioner
Vanliga frågor
F: Vad är skillnaden mellan lägena för en och flera kryssrutor?
Enkelt läge visar en kryssruta för ja/nej-beslut. Flera lägen visar flera kryssrutor där användare kan välja mer än ett alternativ.
F: Kan användare markera alla kryssrutor samtidigt?
Ja. Aktivera alternativet "Markera alla" för att lägga till en kryssruta som markerar eller avmarkerar alla alternativ med ett enda klick.
F: Hur fungerar min/max-val?
Minimum säkerställer att användare väljer minst ett visst antal alternativ. Maximum begränsar hur många kryssrutor de kan välja.
F: Vad gör alternativet ”Annat”?
Den lägger till en extra kryssruta med etiketten "Annat". När den är markerad visas ett textfält så att användare kan ange ett anpassat svar.
F: Hur fungerar "Inget av ovanstående"?
Det fungerar som ett exklusivt alternativ. Om det är markerat avmarkeras alla andra kryssrutor. Om något annat alternativ är markerat avmarkeras alternativet "Ingen" automatiskt.
F: Kan jag förmarkera vissa kryssrutor?
Ja. För enkelläge, aktivera "Starta markerat". För flerläge, markera den lilla kryssrutan bredvid varje alternativ du vill ha som standard.
F: Ska jag förkryssa i rutorna för avtal?
Nej. För policyer, villkor och samtycke bör användare aktivt markera rutan själva.
F: Kan jag ändra ordningen på kryssrutorna?
Ja. Använd upp- och nedpilarna bredvid varje alternativ för att ändra ordningen på dem hur du vill.
F: Vad är skillnaden mellan visningstext och värde?
Visningstext är vad användarna ser. Värde är vad som lagras i din databas för ren och konsekvent data.
F: Kan jag använda villkorlig logik med kryssrutor?
Ja. Utlös andra fält baserat på val med hjälp av operatorer som "Lika med", "Är tom" eller "Är inte tom".
F: Hur skapar jag en obligatorisk kryssruta?
Aktivera "Obligatoriskt fält". För enkelläge måste rutan vara markerad. För flerläge måste användare välja minst ett alternativ eller uppfylla minimikravet.
F: Kan användare ändra val efter att ha kontrollerat?
Ja. De kan markera eller avmarkera alla alternativ fritt innan de skickar in formuläret. "Markera alla" kan också aktiveras när som helst.
