MultiSelect (Monivalinta)
Monivalinta-komponentin avulla käyttäjä voi valita yhden tai useamman vaihtoehdon listalta.
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ä.