Siirry pääsisältöönSiirry sivunavigaatioon

Toggle (Valintakytkin)

Valintakytkintä käytetään esimerkiksi kahden toisensa pois sulkevan tilan tai toiminnan vaihtamisessa. Sitä ei pidä käyttää korvaamaan valintaruutu-komponenttia (checkbox). Käytä valintakytkintä harkiten.

Saavutettavuus ja käytettävyys

  • Kognitiivisen saavutettavuuden kannalta on suositeltavaa esittää selkeä ohjeistusteksti komponentin yhteydessä, koska valintakytkin muuttaa, piilottaa tai muokkaa sisältöä valinnan mukaisesti.
  • Käytä valintakytkintä harkiten. Suomi.fi:ssä valintakytkin-komponenttia käytetään vain tilan muutokseen. Esimerksiksi Suomi.fi:n hakutoiminnossa valintakytkimellä saa hakutuloksissa näkyviin vain viittomakielisten sisältöjen hakutulokset.

Mistä komponentti koostuu

Valintakytkimessä näytettävä label-teksti kertoo, mitä ollaan kytkemässä päälle tai pois. Komponentissa on kaksi tilaa, pois päältä ja päällä. Pois päältä -tila on harmaa ja päällä-tila on pääosin vihreä. Valintakytkin voi olla myös disabloitu molemmissa tiloissa. Komponentin yhteyteen on hyvä liittää ohjeteksti, jotta käyttäjä ymmärtää, mikä toimenpide tapahtuu, kun valintakytkimen asentoa muutetaan.

Koko ja käyttö

Valintakytkin piilottaa, vaihtaa, muuttaa sisällön tai näkymän valinnan mukaisesti. Toiminto tapahtuu välittömästi eikä vaadi käyttäjältä muuta erillistä vahvistusta. Valintakytkimessä on aina yksi oletustila valmiiksi valittuna. Valintakytkintä tulisi käyttää ainoastaan sellaisissa tilanteissa, joissa käyttäjän täytyy valita kahdesta vastakkaisesta tilasta, esimerkiksi asettaa jokin toiminto päälle tai pois päältä.

Variaatiot

Valintakytkimestä on saatavilla kaksi eri variaatiota; painike (button) ja kenttä (input). Painiketta on tarkoitus käyttää kun kyseessä on toiminto, heti tapahtuva muutos. Kenttää käytetään lomakkeissa, jolloin lomaketta lähettäessä sen arvo luetaan.