Űrlapelemek
A HR portál űrlapelemei biztosítják a felhasználók számára az adatbevitelt és a hatékony interakciót a rendszerrel.
Szöveges beviteli mezők
A szöveges beviteli mezők lehetővé teszik a felhasználók számára, hogy rövid vagy hosszabb szöveges adatokat adjanak meg.
Alapvető szöveges mező
Kérjük, adjon meg egy érvényes telefonszámot
Kérjük, adja meg az Ön szervezeti részlegét
A megadott szervezet érvényes
Kódpélda
<!-- Alap szöveges mező -->
<div class="mb-6">
<label for="text-input" class="block text-[#333333] mb-2">Név</label>
<UInput id="text-input" placeholder="Kérem adja meg a nevét" color="audi-red" class="w-full" />
</div>
<!-- Hibaállapot -->
<div class="mb-6">
<label for="text-input-error" class="block text-[#D32F2F] mb-2">Telefonszám</label>
<UInput id="text-input-error" value="+36123" color="audi-red" class="w-full border-[#D32F2F]" />
<p class="text-[#D32F2F] text-sm mt-1">Kérjük, adjon meg egy érvényes telefonszámot</p>
</div>
Szöveges terület (Textarea)
Kódpélda
<label for="textarea" class="block text-[#333333] mb-2">Megjegyzés</label>
<UTextarea id="textarea" rows="4" color="audi-red" class="w-full" placeholder="Írja le a megjegyzését..." />
></textarea>
Jelölőnégyzetek és választógombok
A jelölőnégyzetek és választógombok lehetővé teszik a felhasználók számára opciók kiválasztását.
Jelölőnégyzetek (Checkbox)
Dokumentumok jóváhagyása
Kódpélda
<div class="flex items-center">
<UCheckbox id="checkbox-1" color="audi-red" />
<label for="checkbox-1" class="ml-2 text-[#333333]">Email értesítések</label>
</div>
<div class="flex items-center">
<UCheckbox id="checkbox-2" color="audi-red" checked />
<label for="checkbox-2" class="ml-2 text-[#333333]">SMS értesítések</label>
</div>
Választógombok (Radio)
Kiválasztott munkavégzési forma:
Szabadság típusa
Kódpélda
<div class="space-y-4">
<p class="text-[#333333] mb-2">Kiválasztott munkavégzési forma:</p>
<div class="flex items-center">
<URadio id="radio-1" name="work-type" color="audi-red" checked />
<label for="radio-1" class="ml-2 text-[#333333]">Irodai munkavégzés</label>
</div>
<div class="flex items-center">
<URadio id="radio-2" name="work-type" color="audi-red" />
<label for="radio-2" class="ml-2 text-[#333333]">Otthoni munkavégzés (home office)</label>
</div>
</div>