Checkbox (Valintaruutu)
Valintaruutu on lomakekomponentti, jolla voidaan merkitä tarjottu vaihtoehto valituksi. Useasta valintaruudusta koostuvasta valintaruuturyhmästä käyttäjä voi valita useampia vaihtoehtoja.
Saavutettavuus ja käytettävyys
- Pyri kuvaaviin, lyhyisiin ja ytimekkäisiin label-teksteihin.
- Sijoita saman aihealueen valintaruudut ryhmiin asemoimalla ne päällekkäin.
- Käytä valintaruutua, kun käyttäjän halutaan valitsevan vapaasti yhden tai useampia annetuista vaihtoehdoista.
- Älä käytä valintaruutua tilanteissa, joissa käyttäjän on määrä valita ainoastaan yksi vaihtoehto. Käytä tällöin valintanappia (radiobutton).
- Älä käytä valintaruutua tilan muutokseen. Käytä tähän tarkoitukseen valintakytkintä (toggle).
- Käytä ohjetekstiä tilanteissa, joissa käyttäjälle on tarpeen antaa lisäohjeistusta valinnan suhteen. Yksinkertaisissa tapauksissa ohjetekstiä ei tarvita.
Mistä komponentti koostuu
Valintaruutu koostuu neliönmuotoisesta ruudusta ja sen oikealla puolella olevasta label-tekstistä. Valintaruudun alla voidaan näyttää valintaruutuun liittyvä ohjeteksti. Lisäksi on mahdollista näyttää ohjetekstin alla notifikaatioteksti, jolla voidaan viestiä käyttäjälle komponentin tilasta, esimerkiksi virheellisestä valinnasta. Notifikaatiotekstin lisäksi tilaa viestitään käyttäjälle myös värien sekä valintaruudun reunuksen paksuuden avulla.
Koko ja käyttö
Työpöytä- ja mobiilikäyttöön on määritelty erikseen omat koot valintaruudusta. Oletuksena käytetään pienempää valintaruutua (default), mobiilinäytöillä niille suunniteltua kokoa (large).
Valintaruudun mobiiliversio
Mobiililaitteilla ja pienillä näytöillä käytetään valintaruudun mobiiliversiota (Checkbox.large)
Valintaruutu ryhmässä
Valintaruutu voidaan sijoittaa myös ryhmään (CheckboxGroup). Ryhmälle voidaan antaa tila, joka välitetään jokaiselle valintaruudulle ryhmän sisälle. Mikäli ryhmässä olevalle yksittäiselle valintaruudulle annetaan erikseen oma tila, se ajaa ryhmän antaman tilan ylitse. Ryhmän tilateksti ei välity yksittäisille valintaruuduille. Käytettäessä ryhmää, ei yksittäisille valintaruuduille tulisi antaa omaa tilatekstiä, sillä se saattaa sekoittaa käyttäjää.
Ohje- ja notifikaatiotekstit
Komponentille voidaan antaa ohje- ja notifikaatiotekstit, jotka näytetään komponentin alla. Komponentin ja notifikaatiotekstin ulkonäkö muuttuu komponentin tilan (status) mukana.
Estetty valintaruutu (Disabled Checkbox)
Estetty valintaruutu ei ole käyttäjän valittavissa. Estetty -tila voidaan poistaa esimerkiksi, kun käyttäjä suorittaa toisen vaadittavan toimenpiteen.