// input text / email / tel / password / number

Textové vstupy

Každé pole v .form-group — flex-column, gap 6px. Label 700, border 1.5px #e2e8ef, focus zelený glow, placeholder šedý, hint s info-ikonkou.

Základní typy
Zadej celé jméno jak je v dokladu.
Včetně mezinárodní předvolby, bez mezer.
Min. 8 znaků, jedno číslo, jedno velké písmeno.
// textarea / select

Textarea & Select

textarea je vertikálně resizable, min-height 108px, line-height 1.65. select má vlastní šipku přes SVG background-image.

Víceřádkový vstup + výběr
Max. 500 znaků. Doporučujeme alespoň 150.
// .errors → červený border + label přes :has()

Validace & chyby

.errors pod polem automaticky zčervení label i border přes CSS :has() (kanonicky v _forms.scss).

Smíšený stav – chyby + ok
Zadejte platnou e-mailovou adresu (formát: jan@example.cz).
Heslo musí mít alespoň 8 znaků a obsahovat číslo.
Vypadá skvěle!
Musíte vybrat alespoň jednu kategorii.
// input:disabled textarea:disabled select:disabled

Disabled stav

Šedé pozadí #f5f7fa, světlejší border, světlejší text i label. Kurzor not-allowed. Bez opacity — barvy jsou explicitní.

Disabled vstupy
Toto pole nelze změnit.
// .input-group[data-active-toggle] + active-toggle.js

Input-group s přepínačem (active-toggle)

Checkbox v .input-group řídí pole vedle sebe: bez zaškrtnutí je pole disabled (a tedy se ani neodešle). Pároví se obalem data-active-toggle — řídící je první checkbox skupiny, řízená jsou ostatní pole skupiny. Chování zajišťuje modul active-toggle.js (Bootstrap to nemá). Použití: buňka matice cen (aktivní brána + cena).

Aktivní (zaškrtnuto) vs. neaktivní (disabled)
CZK
EUR
Odškrtnuté „aktivní" → pole ceny je disabled.
// kompletní reálná ukázka

Příklad: editační formulář článku

Reálná CMS podoba — sekce s nadpisy, 2-col grid, textarea, select, patička s akcemi.

Základní informace
Doporučeno 150–300 znaků.
SEO & URL
Automaticky generováno z názvu. Změna ovlivní existující odkazy.
Zrušit