Inputs

Inputs — jak používat

Jediná pravda o formulářových vstupech v ACRM. Vzory jsou posbírané z reálných obrazovek (segment builder, import, nastavení, detaily). Když stavíš formulář nebo filtr, ber prvek odsud — nedefinuj vlastní varianty.

Kdy použít který prvek

Textové pole

Volný krátký text, e-mail, URL, kód. Jeden řádek.

Textarea

Delší text (popis, poznámka). Víc řádků, svisle roztažitelné.

Stepper

Malá celá čísla s krokem ±1 (počet, priorita).

Rozsah od–do

Číselný interval (zaměstnanci, obrat).

Slider

Přibližná hodnota ze spojitého rozsahu, kde nezáleží na přesném čísle.

Select

Jedna volba z uzavřeného krátkého seznamu (do ~12 položek).

Multi-select

Víc voleb z uzavřeného seznamu — položky s checkboxem a fajfkou.

Combobox / našeptávač

Volný text s našeptáváním z externího zdroje (adresa, ARES) — výsledek se psáním doplňuje přímo do pole.

Record select

Výběr ze seznamu delšího než ~10 položek (osoby, firmy, záznamy). Focus otevře panel se search boxem nahoře a prvními položkami; psáním se filtruje. Čtyři varianty téhož panelu: multi (checkbox vpravo), single (fajfka vpravo), bez avatarů (číselníky) a v menu (bez triggeru).

Nadpis-dropdown

Přepínač kontextu v topbaru obrazovky/detailu (pipeline, pohled) — s ikonou i bez.

Radio / Segmented

Jedna volba z 2–5 možností. Segmented pro krátké labely a přepínání pohledů; radio když je potřeba víc textu na možnost.

Checkbox / Přepínač

Zap/vyp. Checkbox ve formuláři a seznamu; přepínač pro okamžitě účinná nastavení.

Option chips

Vícenásobná volba z malé sady jako klikací štítky (obory, tagy filtru).

Tag input

Uživatel přidává vlastní volné hodnoty (tagy) a odebírá je křížkem.

Filtrační chip

Aktivní filtr ve tvaru label │ hodnota s křížkem pro zrušení.

Pravidla — velikost

• Šířka = očekávaná délka obsahu. Nikdy neroztahuj pole na plnou šířku sloupce, pokud to obsah nevyžaduje. Škála: číslo/rozsah (2–3 znaky) ≈56px, kód (IČO/DIČ/PSČ) ≈132px, krátký text (default) ≈210px, e-mail/URL ≈280px, dlouhý text (popis) na plnou šířku.
• Výška. Textové pole / select / combobox / rozsah / tag input / filtrační chip = 32px (kanonický .sgb-input); tlačítko a toolbar-chip = --control-h (30px); segmented track 30px (2px žlábek + 26px segment); checkbox 16px; odebíratelný chip 26px.
• Radius --radius-sm u píolí a menu-položek, --radius-xs u segmentů a checkboxu, --radius-md u rozbalených menu, --radius-pill u odebíratelných chipů.
• Bez základního stínu. Pole jsou v klidu plochá (jen hairline border); stnín (--shadow-pop) nese až rozbalené menu/popover.

Pravidla — barva & stavy

• Accent (funkční modrá) jen na fokusu, výběru a jedné primární akci. Fokus pole = accent rámeček + ring 16%; fokus checkboxu = ring 30%. Jinak vše monochrom, hairline --border-strong.
jemný --shadow-xs.
• Vybraný stav se nepodbarvuje. Option chip a podobné toggly značí výběr modrým rámečkem (+ accent text/ikona), ne výplní. Výjimka: checkbox/radio mají plný accent indikátor.
• Placeholder = --fg-muted, prázdný stav pole formuluj jako „Nastavit hodnotu…" / „Doplnit…".
• Chyba = --critical rámeček + ring + helper text pod polem.
• Ikony se neobarvují — dědí barvu textu prvku (leading ikona = ink, chevron/pomocné = --fg-muted).
• Disabled = --surface-75 povrch, bez stínu, ztlumený text.

Rozbalovací nabídky

• Žádné nadpisy uvnitř menu. Rozbalovací nabídka nikdy nepoužívá eyebrow (overline) ani jiný uvozující nadpis nad položkami — menu je samo o sobě srozumitelné z kontextu spouštěče a obsahu. Výjimka je jen věcný oddělovač skupin (tenká linka), když menu opravdu mísí dva různé druhy položek.
• Menu, combobox i popover mají --shadow-pop nad hairline ringem a --radius-md.
• Aktivní položka v single-selectu nese fajfku vpravo a accent text; v multi-selectu má vyplněný checkbox vpravo (D6, 22. 8. 2026 — checkbox vpravo ve všech multiselect menu: Multi-select · Record select · FilterBar · rail pickery).
• Record select (dlouhý seznam): otevírá se focussem, má search box nahoře (hairline oddělovač), seznam scrolluje do 264px; psáním se filtruje podle jména i sekundárního údaje. Používej ho vždy, když má seznam víc než ~10 položek — než klasický select.
• Scrolluje seznam, ne panel — hlavička s hledáním stojí, protože .rs-list má vlastní max-height a panel overflow: hidden. Nedělej to obráceně (scrollující panel + sticky hlavička): tak vznikl F257, kde se hlavička překryla s první volbou.
• Varianty (26. 8. 2026) — jeden panel, každá varianta jen ubírá: single ubírá checkbox (fajfka vpravo, výběr panel zavře) · bez avatarů ubírá avatar i sekundární údaj (číselníky měst, zemí, měn) · v menu ubírá trigger a hledání je první řádek menu (adder FilterBaru, menu chipu). Kombinují se: textový seznam i menu jedou single i multi.
• Nadpis-dropdown je jen text (volitelně s ikonou) + chevron — bez rámečku pole; slouží k přepínání kontextu, ne k zadávání hodnoty.

Copywriting

• Labely a možnosti v sentence case — žádné verzálky.
• Label je stručný podstatný pojem (Telefon, Obor), helper text nese formát/omezení (např. „8 číslic").
• Vysvětlení pod polem patří vždy a jenom tomu poli. Když platí pro skupinu polí, jde nad první pole skupiny — nikdy pod poslední. Dole ho čtenář přečte, až když už vyplnil, a přiřadí ho k poslednímu poli. Skupinu drží text a mezera: nad ním víc místa než pod ním, žádný rámeček, podbarvení, odsazení ani nadpis podsekce.
• Úvod skupiny vyjmenuje pole, kterých se týká — „Funkce, iniciály a telefony doplňuje…", ne „Tyto údaje doplňuje…". Výčet unese i čtenáře, který větu přečte až u třetí položky; samotný rozestup tohle neudělá. Když je polí tolik, že se výčet nedá přečíst, není to skupina s jedním vysvětlením, ale sekce.

Zdroj pravdy. Tyto vzory zrcadlí živý engine v _ds/segment-screen.css — pole .sgb-input (32px, radius-sm, fokus ring 16 %), combobox .ac / .ac-opt, checkbox .sgb-ck (ring 30 %) — a komponenty Segmented control (.acrm-segmented), Popover & menu (.acrm-popover) a Pills. Při stavbě formuláře ber prvek odsud; nedefinuj vlastní varianty ani neměň výšky/rámečky.