Esikatselu
<Radio name="radio" labelText="Lorem ipsum" value="default" defaultChecked />
Käyttötarkoitus
Valintanapin avulla asiakas voi valita yhden vaihtoehdon samaan ryhmään kuuluvien vaihtoehtojen
joukosta. Valintanapit sopivat tilanteeseen, jossa kaikki valittavat vaihtoehdot ovat toisensa
poissulkevia, eikä asiakas siten voi valita kerrallaan niistä kuin yhden.
Huomioi, että valinnan tulee aina olla pakollinen tieto. Kun asiakas tekee valinnan, sitä ei
saa enää tyhjennettyä. Sen voi ainoastaan vaihtaa toiseen valintaan.
Ryhmittele valintanapit loogisesti ja nimeä ne ymmärrettävästi. Jos on mahdollista, että
mikään vaihtoehdoista ei sovi asiakkaan tilanteeseen, tarjoa tilanteeseen esimerkiksi
vaihtoehto “Ei valintaa”.
Valintanapit kiinnittävät asiakkaan huomion valittaviin vaihtoehtoihin ja niiden vertailu on helpompaa kuin esimerkiksi valintalistaa käyttämällä. Jos valintanappeja on paljon,
niiden käyttäminen lisää asiakkaan kognitiivista kuormaa. Voit harkita tällöin valintalistan (Select) käyttöä valintanappien sijaan.
Samaan ryhmään kuuluvat valintanapit järjestetään allekkain SelectionGroup-komponentilla.
- Käytä valintanappia tilanteissa, joissa asiakkaan pitää pystyä valitsemaan täsmälleen yksi vaihtoehto.
- Luettele valintanapit 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.
- Jos vaihtoehtoja on paljon, harkitse Select-komponentin käyttöä valintanappien sijaan.
Saavutettavuus
Komponentti toteuttaa yksittäisen saavutettavan valintanapin (radio button).
Esimerkit
<Radio name="radio-default" labelText="Valintanappi" value="default" />
Valintanapin nimilapun voi piilottaa visuaalisesti hideLabel-propilla, kun valintaruutu on yhdistetty muihin komponentteihin.
<Radio name="radio-without-label" labelText="Valintanappi piilotetulla nimilapulla" hideLabel value="default" />
Aputeksti
Pidä valintanappi nimilappu lyhyenä ja selkeänä. Vaihtoehtojen selitykseen voi käyttää aputekstiä infoText-propilla,
mikä voi helpottaa lyhyiden ja selkeiden nimilappujen suunnittelua.
<Radio name="valinta" labelText="Valintanappi" infoText="Tähän voi laittaa valinnan lisäkuvauksen." />
<SelectionGroup labelText="Viestit OmaKelaan">
<Radio
name="viestit"
labelText="Käytössä"
infoText="Jos sinua ei tavoiteta puhelimitse, Kela voi lähettää sinulle viestin OmaKelaan. Viestin saapumisesta lähetetään sinulle ilmoitus tekstiviestillä tai sähköpostilla."
/>
<Radio
name="viestit"
labelText="Ei käytössä"
infoText="Kela voi ottaa sinuun yhteyttä vain puhelimitse tai postin kautta."
/>
</SelectionGroup>
Oletusvalinta
<Radio
name="radio-checked"
id="radio-checked"
labelText="Valintanappi oletusvalinnalla"
value="checked"
defaultChecked
/>
Virheellinen arvo
<SelectionGroup
labelText="Rajaa näytettäviä reseptejä"
invalid
required
requiredLabel="Pakollinen tieto"
errorText="Pakollinen tieto puuttuu."
>
<Radio name="radio-invalid" id="radio-invalid-kaikki" labelText="Kaikki reseptit" value="Kaikki reseptit" />
<Radio name="radio-invalid" id="radio-invalid-jäljellä" labelText="Lääkettä jäljellä" value="Lääkettä jäljellä" />
<Radio
name="radio-invalid"
id="radio-invalid-uusimis"
labelText="Uusimispyyntö kesken"
value="Uusimispyyntö kesken"
/>
</SelectionGroup>
Estetty valintanappi
<Radio name="radio-disabled" id="radio-disabled" labelText="Estetty valintanappi" value="disabled" disabled />
Kokovaihtoehdot
<>
<Radio name="radio-sizes" labelText="Valintanappi xs-koossa" size="xs" value="xs" />
<Radio name="radio-sizes" labelText="Valintanappi sm-koossa" size="sm" value="sm" />
<Radio name="radio-sizes" labelText="Valintanappi md-koossa (oletus)" value="md" />
</>
Tilan hallinta
Kontrolloimaton käyttö
Valintanappia voi käyttää kontrolloimattomasti, jolloin defaultChecked asettaa oletusarvon ja ref:n kautta pääsee käsiksi input-elementtiin.
function UncontrolledRadioGroup() {
const refs = useRef<HTMLInputElement[]>([]);
const radios = [
{
labelText: "Kaikki reseptit",
defaultChecked: true,
value: "all",
},
{
labelText: "Lääkettä jäljellä",
defaultChecked: false,
value: "available",
},
{
labelText: "Uusimispyyntö kesken",
defaultChecked: false,
value: "renewal",
},
];
return (
<SelectionGroup labelText="Rajaa näytettäviä reseptejä" required requiredLabel="Pakollinen tieto">
{radios.map((radio, i) => (
<Radio key={radio.value} name="uncontrolled-example" ref={(el) => (refs.current[i] = el)} {...radio} />
))}
</SelectionGroup>
);
}
Kontrolloitu käyttö
Kontrolloidusti käytettäessä valintanappien tilaa hallitaan useState-hookin avulla.
function ControlledRadioGroup() {
const [radios, setRadios] = useState([
{
labelText: "Kaikki reseptit",
checked: true,
value: "all",
},
{
labelText: "Lääkettä jäljellä",
checked: false,
value: "available",
},
{
labelText: "Uusimispyyntö kesken",
checked: false,
value: "renewal",
},
]);
const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setRadios(radios.map((radio) => ({ ...radio, checked: e.target.checked && e.target.value === radio.value })));
};
return (
<SelectionGroup labelText="Rajaa näytettäviä reseptejä" required requiredLabel="Pakollinen tieto">
{radios.map((radio) => (
<Radio key={radio.value} name="controlled-example" onChange={handleOnChange} {...radio} />
))}
</SelectionGroup>
);
}
Valintanappi pitkällä aputekstillä
function ExampleAccordion() {
const [isOpen, setOpen] = useState(false);
return (
<>
<Radio name="valinta" labelText="Valintanappi" />
<Accordion className="kds-mx-8" id="asunnon-pinta-ala" isOpen={isOpen} appearance="link">
<AccordionToggle onClick={() => setOpen(!isOpen)}>Lue lisää valintanappiin liittyvästä asiasta</AccordionToggle>
<AccordionBody>
<p>
Ilmoita pinta-alana kaikki asuinkäytössä olevat tilat, joita on mahdollista lämmittää. Ilmoita pinta-ala
täysinä neliömetreinä ja pyöristä desimaaliluvut seuraavaan kokonaislukuun.
</p>
<p>
Pinta-alaan ei lasketa parveketta, kuistia, kylmää eteistä, kellaria, pannuhuonetta, autotallia ja kylmää
varastotilaa, joten niitä ei tarvitse ilmoittaa.
</p>
</AccordionBody>
</Accordion>
</>
);
}