Siirry pääsisältöönSiirry sivunavigaatioon

MultiSelect (Monivalinta)

Monivalinta ei toimi tällä hetkellä saavutettavasti VoiceOver ruudunlukijalla mikäli käytössä on MacOS ja Safari. Ongelma ei ilmene Chromiumpohjaisilla selaimilla, kuten Chromella tai Edgellä.

Monivalinta-komponentin avulla käyttäjä voi valita yhden tai useamman vaihtoehdon listalta.

Vaihtoehtoja voi rajata kirjoittamalla kenttään

Saavutettavuus ja käytettävyys

  • Listalla olevien vaihtoehtojen tekstien tulee olla uniikkeja.
  • Monivalinnan kanssa tulee aina käyttää otsaketta (label). Suomi.fi Design Systemin komponenttiin otsake kuuluu pakollisena osana.
  • Ohjeistava kenttäteksti (visualPlaceholder) auttaa hahmottamaan syötteen paikan. Sen ei tule sisältää käyttötilanteen kannalta olennaista tietoa.
  • Komponentille voidaan asettaa virhetila, jolla voidaan indikoida esimerkiksi virheellistä tai puuttuvaa syötettä. Virhetilassa komponentin reunukset sekä komponentin alla näytettävä tilateksti muuttuvat punaiseksi.

Mistä komponentti koostuu

Monivalinta koostuu otsakkeesta, hakukentästä, valikosta, tilatekstistä, tehtyjen valintojen listasta sekä tehtyjen valintojen poistamiseen tarkoitetusta tyhjennyspainikkeesta. Valikko aukeaa kun fokus siirtyy hakukenttään. Valikossa näytettäviä vaihtoehtoja rajataan hakukentän tekstin mukaisesti.

Valinnat voivat olla pakollisia, milloin niitä ei voi muokata. Valikosta valitut ja pakolliset vaihtoehdot näytetään listana hakukentän alla. Valitut vaihtoehdot, pakollisia lukuunottamatta, voi poistaa tyhjennyspainikkeen avulla.

Koko ja käyttö

Monivalintaa käytetään tilanteissa, missä käyttäjä voi valita useita vaihtoehtoja ennaltamääritellyistä vaihtoehdoista ja erityisesti tilanteissa, missä vaihtoehtoja on paljon ja niiden rajaaminen helpottaa valinnan tekemistä.