Esikatselu
<SelectionGroup labelText="Lorem ipsum" helpText="Dolor sit amet">
<Checkbox name="lorem" labelText="Lorem" />
<Checkbox name="lorem" labelText="Ipsum" />
<Checkbox name="lorem" labelText="Dolor" />
</SelectionGroup> Käyttötarkoitus
Komponentin avulla voit ryhmitellä valintanapit ja valintaruudut saavutettaviksi ryhmiksi. Valintanapit ja valintaruudut ryhmitellään aina allekkain.
Saavutettavuus
Ryhmän otsikko (legend) ja mahdollinen virheviesti luetaan automaattisesti, kun fokus hyppää ryhmän ensimmäiseen elementtiin.
Valintaruujen tapauksessa NVDA ei mene automaattisesti lomaketilaan, toisin kuin muiden komponenttien kanssa.
Tästä syystä virheilmoituksen liittäminen fieldset-elemettiin aria-describedby-attribuutilla
ei toimi ja virheviesti jää kokonaan lukematta. Radio buttoneiden kanssa aria-describedby-attribuuttin
käyttö virheviestin automaattiseen lukemiseen toimii.
Lue lisää: Why do radio buttons trigger focus mode, but checkboxes don't? (Avautuu uuteen välilehteen)
Komponentissa on nyt toteutus, jossa virheilmoitus on piilotettu ruudunlukijoille osaksi legendiä.
Lukemisjärjestys ei ole aivan optimaalinen, mutta valintanapit ja valintaruudut toimivat samalla logiikalla.
Esimerkit
Radio
<SelectionGroup labelText="Rajaa näytettäviä reseptejä" helpText="Valitse mitkä reseptit näytetään listauksessa">
<Radio name="prescription-radio" labelText="Kaikki reseptit" />
<Radio name="prescription-radio" labelText="Lääkettä jäljellä" />
<Radio name="prescription-radio" labelText="Uusimispyyntö kesken" />
</SelectionGroup> Checkbox
<SelectionGroup labelText="Rajaa näytettäviä reseptejä" helpText="Valitse mitkä reseptit näytetään listauksessa">
<Checkbox name="prescription" labelText="Kaikki reseptit" />
<Checkbox name="prescription" labelText="Lääkettä jäljellä" />
<Checkbox name="prescription" labelText="Uusimispyyntö kesken" />
</SelectionGroup> Oletusvalinta
<SelectionGroup labelText="Rajaa näytettäviä reseptejä" required>
<Radio name="prescription-radio-default" labelText="Kaikki reseptit" defaultChecked />
<Radio name="prescription-radio-default" labelText="Lääkettä jäljellä" />
<Radio name="prescription-radio-default" labelText="Uusimispyyntö kesken" />
</SelectionGroup> <SelectionGroup labelText="Rajaa näytettäviä reseptejä" required>
<Checkbox name="prescription" labelText="Kaikki reseptit" defaultChecked />
<Checkbox name="prescription" labelText="Lääkettä jäljellä" />
<Checkbox name="prescription" labelText="Uusimispyyntö kesken" />
</SelectionGroup> Validointivirhe
Näytä virheellisessä kenttäryhmässä aina selkeä virheilmoitus. Ryhmälle näytetään aina yksi yhteinen virheilmoitus
valintojen alapuolella. Kenttäryhmän voi merkitä virheelliseksi käyttämällä invalid ja errorText -propeja.
<SelectionGroup
labelText="Rajaa näytettäviä reseptejä"
invalid
required
requiredLabel="Pakollinen tieto"
errorText="Pakollinen tieto puuttuu. Valitse rajaus."
>
<Radio name="prescription-radio-invalid" labelText="Kaikki reseptit" value="kaikki" />
<Radio name="prescription-radio-invalid" labelText="Lääkettä jäljellä" value="jäljellä" />
<Radio name="prescription-radio-invalid" labelText="Uusimispyyntö kesken" value="kesken" />
</SelectionGroup> <SelectionGroup
labelText="Rajaa näytettäviä reseptejä"
invalid
required
requiredLabel="Pakollinen tieto"
errorText="Pakollinen tieto puuttuu. Valitse rajaus."
>
<Checkbox name="prescription" labelText="Kaikki reseptit" value="kaikki" />
<Checkbox name="prescription" labelText="Lääkettä jäljellä" value="jäljellä" />
<Checkbox name="prescription" labelText="Uusimispyyntö kesken" value="kesken" />
</SelectionGroup> Disabloitu ryhmä
<SelectionGroup labelText="Rajaa näytettäviä reseptejä" disabled>
<Radio name="prescription-radio-disabled" labelText="Kaikki reseptit" value="kaikki" />
<Radio name="prescription-radio-disabled" labelText="Lääkettä jäljellä" value="jäljellä" />
<Radio name="prescription-radio-disabled" labelText="Uusimispyyntö kesken" value="kesken" />
</SelectionGroup> <SelectionGroup labelText="Rajaa näytettäviä reseptejä" disabled>
<Checkbox name="prescription" labelText="Kaikki reseptit" value="kaikki" />
<Checkbox name="prescription" labelText="Lääkettä jäljellä" value="jäljellä" />
<Checkbox name="prescription" labelText="Uusimispyyntö kesken" value="kesken" />
</SelectionGroup> Kaksipalstainen asettelu
<SelectionGroup labelText="Rajaa näytettäviä reseptejä" leftCol={(children) => <Column md={4}>{children}</Column>}>
<Radio name="prescription-radio-2columns" labelText="Kaikki reseptit" value="kaikki" defaultChecked />
<Radio name="prescription-radio-2columns" labelText="Lääkettä jäljellä" value="jäljellä" />
<Radio name="prescription-radio-2columns" labelText="Uusimispyyntö kesken" value="kesken" />
</SelectionGroup> <SelectionGroup labelText="Rajaa näytettäviä reseptejä" leftCol={(children) => <Column md={4}>{children}</Column>}>
<Checkbox name="prescription" labelText="Kaikki reseptit" />
<Checkbox name="prescription" labelText="Lääkettä jäljellä" />
<Checkbox name="prescription" labelText="Uusimispyyntö kesken" />
</SelectionGroup> Pakollisuuden merkitseminen ryhmälle
Yksi valinnoista pakollinen
Esimerkki merkitsee kentät pakollisiksi siihen asti, että yksi niistä on valittu. Valinnan jälkeen yksittäisiä valintaruutuja ei enää ilmoiteta pakollisiksi.
function SelectionGroupExample() {
const [selected, setSelected] = useState({ prescription1: false, prescription2: false, prescription3: false });
const isAtLeastOneSelected = Object.values(selected).some(Boolean);
const handleOnChange = (event) => {
setSelected((prev) => ({ ...prev, [event.target.name]: event.target.checked }));
};
return (
<SelectionGroup labelText="Rajaa näytettäviä reseptejä" requiredLabel="Pakollinen tieto" requiredGroup>
<Checkbox
checked={selected.prescription1}
labelText="Kaikki reseptit"
name="prescription1"
onChange={handleOnChange}
requiredGroup={!isAtLeastOneSelected}
value="kaikki"
/>
<Checkbox
checked={selected.prescription2}
labelText="Lääkettä jäljellä"
name="prescription2"
onChange={handleOnChange}
requiredGroup={!isAtLeastOneSelected}
value="jäljellä"
/>
<Checkbox
checked={selected.prescription3}
labelText="Uusimispyyntö kesken"
name="prescription3"
onChange={handleOnChange}
requiredGroup={!isAtLeastOneSelected}
value="kesken"
/>
</SelectionGroup>
);
} Kaikki valinnat pakollisia
Esimerkki merkitsee kaikki ryhmän valintaruudut pakollisiksi ja jokainen niistä ilmoitetaan ruudunlukijalle pakollisena. Käytetään silloin kun käyttäjän on valittava kaikki valintaruudut.
<SelectionGroup labelText="Hyväksyn palvelun ehdot" requiredLabel="Pakollinen tieto" required>
<Checkbox name="terms" labelText="Hyväksyn palvelun käyttöehdot" value="yes" />
<Checkbox name="privacy" labelText="Hyväksyn palvelun tietosuojaehdot" value="yes" />
</SelectionGroup> Kokovaihtoehdot
Pienin koko (xs) on tarkoitettu tiivistä asettelua vaativiin asiantuntijakäyttöliittymiin.
<>
<SelectionGroup
className="kds-mb-6"
labelText="Rajaa näytettäviä reseptejä"
helpText="Valitse mitkä reseptit näytetään listauksessa"
size="xs"
>
<Checkbox name="prescription" labelText="Kaikki reseptit" size="xs" />
<Checkbox name="prescription" labelText="Lääkettä jäljellä" size="xs" />
<Checkbox name="prescription" labelText="Uusimispyyntö kesken" size="xs" />
</SelectionGroup>
<SelectionGroup
className="kds-mb-6"
labelText="Rajaa näytettäviä reseptejä"
helpText="Valitse mitkä reseptit näytetään listauksessa"
size="sm"
>
<Checkbox name="prescription" labelText="Kaikki reseptit" size="sm" />
<Checkbox name="prescription" labelText="Lääkettä jäljellä" size="sm" />
<Checkbox name="prescription" labelText="Uusimispyyntö kesken" size="sm" />
</SelectionGroup>
<SelectionGroup
className="kds-mb-6"
labelText="Rajaa näytettäviä reseptejä"
helpText="Valitse mitkä reseptit näytetään listauksessa"
size="md"
>
<Checkbox name="prescription" labelText="Kaikki reseptit" size="md" />
<Checkbox name="prescription" labelText="Lääkettä jäljellä" size="md" />
<Checkbox name="prescription" labelText="Uusimispyyntö kesken" size="md" />
</SelectionGroup>
</> <>
<SelectionGroup
className="kds-mb-6"
labelText="Rajaa näytettäviä reseptejä"
leftCol={(children) => <Column md={4}>{children}</Column>}
helpText="Valitse mitkä reseptit näytetään listauksessa"
size="xs"
>
<Checkbox name="prescription" labelText="Kaikki reseptit" size="xs" />
<Checkbox name="prescription" labelText="Lääkettä jäljellä" size="xs" />
<Checkbox name="prescription" labelText="Uusimispyyntö kesken" size="xs" />
</SelectionGroup>
<SelectionGroup
className="kds-mb-6"
labelText="Rajaa näytettäviä reseptejä"
leftCol={(children) => <Column md={4}>{children}</Column>}
helpText="Valitse mitkä reseptit näytetään listauksessa"
size="sm"
>
<Checkbox name="prescription" labelText="Kaikki reseptit" size="sm" />
<Checkbox name="prescription" labelText="Lääkettä jäljellä" size="sm" />
<Checkbox name="prescription" labelText="Uusimispyyntö kesken" size="sm" />
</SelectionGroup>
<SelectionGroup
className="kds-mb-6"
labelText="Rajaa näytettäviä reseptejä"
leftCol={(children) => <Column md={4}>{children}</Column>}
helpText="Valitse mitkä reseptit näytetään listauksessa"
size="md"
>
<Checkbox name="prescription" labelText="Kaikki reseptit" size="md" />
<Checkbox name="prescription" labelText="Lääkettä jäljellä" size="md" />
<Checkbox name="prescription" labelText="Uusimispyyntö kesken" size="md" />
</SelectionGroup>
</>