Űrlap elemek
A Karrier Portál űrlap komponensei, amelyek a felhasználói adatbevitelt teszik lehetővé.
Szöveges beviteli mezők
Alap szövegmező
Kérjük, a teljes nevedet add meg
Állapotok
A fókuszált mezőt piros szegély jelöli
Ez a mező hibás adatot tartalmaz
Kódpélda
<div class="mb-4">
<label class="block text-[#333333] mb-1 text-sm font-medium">Név</label>
<input
type="text"
placeholder="Add meg a neved"
class="w-full px-3 py-2 border border-[#E0E0E0] rounded-[4px] focus:ring-2 focus:ring-[#f50537] focus:border-[#f50537] focus:outline-none transition"
/>
<p class="text-xs text-[#666666] mt-1">Kérjük, a teljes nevedet add meg</p>
</div><!-- Hibás állapot -->
<div>
<label class="block text-[#333333] mb-1 text-sm font-medium">Hibás állapot</label>
<input
type="text"
value="Hibás tartalom"
class="w-full px-3 py-2 border border-[#D32F2F] rounded-[4px] focus:ring-2 focus:ring-[#D32F2F] focus:border-[#D32F2F] focus:outline-none transition"
/>
<p class="text-xs text-[#D32F2F] mt-1">Ez a mező hibás adatot tartalmaz</p>
</div>Használati irányelvek
- Mindig használj címkét (label) a beviteli mezőkön
- A placeholder kiegészítő információt nyújthat, de nem helyettesíti a címkét
- A fókuszált mező az Audi piros (#f50537) színnel van kiemelve
- Hibaüzenetekhez a piros (#D32F2F) színt használjuk
Szövegdobozok (Textarea)
Maximum 500 karakter
Kódpélda
<div>
<label class="block text-[#333333] mb-1 text-sm font-medium">Bemutatkozás</label>
<textarea
rows="4"
placeholder="Írd le röviden az eddigi tapasztalataidat és céljaidat..."
class="w-full px-3 py-2 border border-[#E0E0E0] rounded-[4px] focus:ring-2 focus:ring-[#f50537] focus:border-[#f50537] focus:outline-none transition"
></textarea>
<p class="text-xs text-[#666666] mt-1">Maximum 500 karakter</p>
</div>Használati irányelvek
- Hosszabb szöveges tartalom bevitelére használandó
- A sorok számát a válasz várható hosszához kell igazítani
- Érdemes karakter korlátot jelezni a felhasználónak
Jelölőnégyzetek és rádiógombok
Jelölőnégyzetek (Checkbox)
Elfogadom az adatkezelési feltételeket
Szeretnék értesítéseket kapni új állásajánlatokról
Letiltott jelölőnégyzet
Rádiógombok (Radio)
Preferált munkaidő
Teljes munkaidő
Részmunkaidő
Letiltott választási lehetőség
Kódpélda
<!-- Jelölőnégyzet -->
<div class="flex items-center">
<input type="checkbox" class="w-4 h-4 text-[#f50537] focus:ring-[#f50537] mr-2" />
<span class="text-sm text-[#333333]">Elfogadom az adatkezelési feltételeket</span>
</div>
<!-- Rádiógomb -->
<div class="flex items-center">
<input type="radio" name="worktime" class="w-4 h-4 text-[#f50537] focus:ring-[#f50537] mr-2" checked />
<span class="text-sm text-[#333333]">Teljes munkaidő</span>
</div>Használati irányelvek
- Jelölőnégyzeteket egymástól független beállításokhoz használj
- Rádiógombokat egymást kizáró opciókhoz használj
- A kiválasztott állapot az Audi piros (#f50537) színt használja
- Mindig csoportosítsd a kapcsolódó opciókat