Select box

Pokud ve svém rozhraní potřebujete, aby si lidé vybrali z více možností, můžete využít tzv. Select box.

Select box se hodí v případě, pokud si mají lidé vybrat z většího množství hodnot, které by jinak v rozhraní zabraly více místa. Pokud máte například do 5 položek, využijte raději Radio button.

Poznamka – tento prvek je často nazýván také jako tzv. Dropdown. Někteří lidé jej ale poté zaměňují za prvek Menu, které má trochu jiné chování.

Jak vypadá

  • Select box vypadá na různých platformách různě, charakterizuje jej ale šipka naznačující možnost rozbalení
  • Select box je typicky doplněn o popis hodnoty, kterou je třeba vybrat
Příklad využití Select boxu pro výběr štítku
Příklad využití Select boxu pro výběr štítku

Stavy

Hodnota není vybrána
Hodnota není vybrána
Select box po najetí myši
Select box po najetí myši

Když kliknete na selext box, tak se poté rozbalí dostupné možnosti:

Po kliknutí se zobrazí seznam hodnot
Po kliknutí se zobrazí seznam hodnot
Po najetí myši se hodnota odliší od ostatních
Po najetí myši se hodnota odliší od ostatních
Po kliknutí na vybranonu hodnotu se vybere a zobrazí jako hodnota Select boxu
Po kliknutí na vybranonu hodnotu se vybere a zobrazí jako hodnota Select boxu

Při opětovném otevření Selext boxu s již vybranou hodnotou je vybraná hodnota v seznamu odlišena od ostatních hodnot.

Vybraná hodnota je v seznamu odlišena od ostatních
Vybraná hodnota je v seznamu odlišena od ostatních

Poznámka – Je potřeba mít na paměti, že Select box lze ovládat nejen pomocí myši, ale také klávesnice – konkrétně:

  • Klávesou Mezerník pro rozbalení možností
  • Šipkami pro pohyb mezi hodnotami
  • Pro výběr hodnoty Mezerník nebo Enter
  • Jakákoliv klávesa pro přesun na první hodnotu, která na dané písmeno nebo číslo začíná

Skupiny hodnot

Pro snazší orientaci v hodnotách je možné je spojit v rámci seznamu do skupin. Díky tomu je také možné hodnotám předat další význam a pomoct tak lidem s výběrem.

Seskupené hodnoty v Select boxu
Seskupené hodnoty v Select boxu

Reference

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *