Loading...
Základní varianta, kterou používáme v nejvíce případech ve formulářích.
Inline input je v designu spíše doplňkovou variantou. Zatímco vertikální rozložení je standardem pro dobrou čitelnost a přístupnost, inline varianta se používá tam, kde je kritická úspora vertikálního místa nebo kde formulář tvoří specifický vizuální celek.
Pro textová pole je vyžadován Label, který stručně popisuje účel Inputu. Popisek je standardně zahrnut pro všechna pole. Pokud jako Label slouží jiný textový prvek, například název sekce, lze tento popisek vizuálně skrýt.
Povinné pole je označeno hvězdičkou. U nás vycházíme z předpokladu, že pole jsou většinou povinná všechna, proto výchozí stav většiny polí je bez hvězdičky. Pokud pole není povinné, uveďte v závorkách vedle popisku pole slovo „volitelné“. Validace se provádí po odeslání formuláře, nebo přes komponentu Validator.
Jak postupovat v jiných situacích:
Zástupný text je volitelný a zůstává viditelný, dokud není zadán jeden nebo více znaků.
Protože zástupný text zmizí, není vložení pokynů nebo požadavků jako zástupného textu dostupné. Pomocný text je preferovanou metodou pro sdělení těchto informací.
Input Description se umisťuje pod pole a informuje uživatele o případných požadavcích nebo upozorněních. Pomocný text se může zobrazovat trvale nebo při aktivním zobrazení.
V případě chyby bude pomocný text nahrazen chybovou zprávou.
Prefix je užitečný pro vizuální zdůraznění obsahu pole. Sufix je užitečný pro doplnění obsahu pole jako rozměry, hmotnost nebo měny, které používají koncové symboly. Jak Prefix tak Suffix mohou obsahovat ikonu nebo text. Při použití textu platí omzení na 2 znaky.
Addon se od prefixu a suffixu odlišuje tím, že do něj lze umístit delší text nebo button. Input může mít k sobě levý a pravý addon. Addon může být ikona, text nebo Button. Button může být textový nebo Icon only.
Co je dobré si k chování inputů ještě přečíst:
Barevné zvýraznění inputů, formulářových prvků, řádků tabulky
Pravidla pro zobrazení validačních hlášek
Hodnoty textových polí přetékají doleva a doprava. Pokud je pole aktivní, obsah se posune, aby kurzor zůstal viditelný při zadávání znaků uživatelem. Když pole ztratí fokus, obsah se posune na začátek. Opětovnou interakcí na pole se uživatel vrátí na konec obsahu. Textová pole by se obecně měla vyhnout přetečení. Použijte pole Text Area, pokud se očekává, že hodnota pole bude delší než krátká věta.
Hover stav se aktivuje vždy, když uživatel interaguje s polem. Během aktivního režimu se barva pozadí odstraní a ohraničení se zvýrazní.
Pokud pole neprojde validací, pomocný text zobrazí chybovou zprávu, která uživateli pomůže úspěšně splnit vstupní požadavky. Chybové zprávy jsou stručné a přímé a nahrazují veškerý dříve viditelný pomocný text.
Uživatelé se nemohou zaměřit na pole určená pouze pro čtení ani je změnit. Jejich vstup je odvozen z jiných částí uživatelského rozhraní a je určen k prohlížení pro referenci. Vstup se odesílá s formulářem.
Uživatelé se nemohou zaměřit na zakázaná pole ani je změnit. Jejich dostupnost závisí na určitých požadavcích. Z zakázaných polí se neodešle žádná hodnota.
Tlačítko pro vymazání se ve výchozím nastavení zobrazuje jako koncová ikona, pokud je pole aktivní a je do něj zadán jeden nebo více znaků.
