Checkbox

Valintaruutu yhden tai useamman vaihtoehdon valitsemiseen.

Julkaistu versiossa 1.1.0

Esikatselu

Käyttötarkoitus

Käytä valintaruutuja tilanteissa, joissa asiakas voi valita yhden tai useamman vaihtoehdon. Asiakas voi myös olla valitsematta yhtään vaihtoehtoa. Valintaruuturyhmä voi myös olla pakollinen, jos asiakkaan odotetaan valitsevan vähintään yksi vaihtoehto.

Ryhmittele valintaruudut loogisesti ja nimeä ne ymmärrettävästi. Yritä pitää vaihtoehtojen määrä hallittavana. Jos vaihtoehtoja alkaa olla paljon, kannattaa harkita Multiselect-komponentin käyttöä.

Samaan ryhmään kuuluvat valintaruudut järjestetään allekkain SelectionGroup-komponentilla.

Voit käyttää yksittäistä valintaruutua tilanteessa, jossa asiakas tekee päälle / pois päältä -tyyppisen valinnan. Huolehdi tällöin, että valintaruudun teksti on riittävän yksiselitteinen. Asiakkaan pitää myös ymmärtää, mitä valitsematta jättäminen tarkoittaa. Jos tällaisen yksittäisen valintaruudun tapauksessa valitun tilan vastakohta ei ole yksiselitteisesti pääteltävissä, käytä tilanteessa mieluummin valintaruutuja, joilla kuvaat molemmat tilat.

Tee näin

Luettele valintaruudut loogisessa järjestyksessä, esimerkiksi valinnan yleisyyden mukaan tai aakkosjärjestyksessä.
Nimeä vaihtoehdot selkeästi ja ymmärrettävästi, mutta mahdollisimman napakasti. Lisää valintaruuturyhmälle kuvaava otsikko.
Jos haluat käyttää oletusvalintaa, valitse asiakkaan kannalta todennäköisin tai sopivin vaihtoehto. Huolehdi, että oletusvalinnan käyttö on myös asiakkaan kannalta turvallista.
Käytä valintaruutua päälle / pois päältä -tyyppisessä tilanteessa vain, jos vaihtoehdon valitsemisen ja valitsematta jättäminen ovat yksiselitteisesti ymmärrettävissä.

Älä tee näin

Älä käytä valintaruutuja, jos vaihtoehdoista voi valita yhden. Käytä tällöin valintanappia (Radio).
Älä käytä valintaruutua suorittamaan toimintoja. Käytä tällöin painiketta (Button).

Saavutettavuus

Komponentti toteuttaa yksittäisen saavutettavan valintaruudun.

Esimerkit

Valintaruudun nimilapun voi piilottaa visuaalisesti hideLabel-propilla, kun valintaruutu on yhdistetty muihin komponentteihin.

Pakollisuus

Yksittäisen valintaruudun voi merkitä pakolliseksi required-propilla. Älä käytä tätä merkintätapaa, jos kyseessä on useasta valintaruudusta muodostuva kenttäryhmä. Katso SelectionGroup-komponentti.

Aputeksti

Pidä valintaruudun nimilappu lyhyenä ja selkeänä. Vaihtoehtojen selitykseen voi käyttää aputekstiä infoText-propilla, mikä voi helpottaa lyhyiden ja selkeiden nimilappujen suunnittelua.

Oletusvalinta

Virheellinen arvo

Yksittäisen valintaruudun yhteyteen voi tulostaa virheilmoitustekstin errorText-propilla. Useasta valintaruudusta koostuvan kenttäryhmän virhetilanteet esitetään eri tavalla, katso esimerkki SelectionGroup-komponentin sivulta.