Radio Button (Valintanappi)
Valintanappi on lomakekomponentti, jolla voi valita yhden vaihtoehdon useammasta valintanapista koostuvasta valintanappiryhmästä. Käyttäjä voi valita kerrallaan vain yhden vaihtoehdon. Kun käyttäjä tekee uuden valinnan, aiemmin tehty valinta poistuu ja korvautuu uudella valinnalla.
Saavutettavuus ja käytettävyys
- Pyri kuvaaviin, lyhyisiin ja ytimekkäisiin otsakkeisiin (label).
- Sijoita saman aihealueen valintanapit ryhmiin asemoimalla ne päällekkäin.
- Käytä valintanappia, kun käyttäjän halutaan valitsevan yksi annetuista vaihtoehdoista.
- Älä käytä valintanappia tilanteissa, joissa käyttäjän on määrä valita useita vaihtoehtoja. Käytä tällöin valintaruutua (checkbox).
- Älä käytä valintanappia 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.
- Valittuun valintanappiin voi liittyä lisävalintoja, kuten esimerkiksi tekstikenttiä tai valintakytkimiä.
- Lisävalinnat ovat piilotettuina oletustilassa ja ne näytetään vasta, kun valintanappi valitaan.
- Lisävalinnat asetellaan suoraan valitun valintanapin alle sisennettynä.
Mistä komponentti koostuu
Valintanappi koostuu pyöreästä painikkeesta ja sen oikealla puolella olevasta label-tekstistä. Valintanapin alla voidaan näyttää valintanappiin liittyvä ohjeteksti.
Koko ja käyttö
Työpöytä- ja mobiilikäyttöön on määritelty erikseen omat koot valintanapista. Oletuksena käytetään pienempää valintanappia (default), mobiilinäytöillä niille suunniteltua kokoa (large).
Valintanapin mobiiliversio (Large Radio Button)
Mobiililaitteilla ja pienillä näytöillä käytetään valintanapin mobiiliversiota.
Valintanappi ohjetekstillä (Radio Button + Hint Text)
Komponentille voidaan antaa ohjeteksti, joka näytetään komponentin alla.
Estetty valintanappi (Disabled Radio Button)
Estetty valintanappi ei ole käyttäjän valittavissa. Estetty -tila voidaan poistaa esimerkiksi, kun käyttäjä suorittaa toisen vaadittavan toimenpiteen.