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.
Checkboxien 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="radio-resepti" labelText="Kaikki reseptit" />
<Radio name="radio-resepti" labelText="Lääkettä jäljellä" />
<Radio name="radio-resepti" labelText="Uusimispyyntö kesken" />
</SelectionGroup> Checkbox
<SelectionGroup labelText="Rajaa näytettäviä reseptejä" helpText="Valitse mitkä reseptit näytetään listauksessa">
<Checkbox name="check-resepti" labelText="Kaikki reseptit" />
<Checkbox name="check-resepti" labelText="Lääkettä jäljellä" />
<Checkbox name="check-resepti" labelText="Uusimispyyntö kesken" />
</SelectionGroup> Oletusvalinta
<SelectionGroup labelText="Rajaa näytettäviä reseptejä" required>
<Radio name="radio-requiredresepti" labelText="Kaikki reseptit" defaultChecked />
<Radio name="radio-requiredresepti" labelText="Lääkettä jäljellä" />
<Radio name="radio-requiredresepti" labelText="Uusimispyyntö kesken" />
</SelectionGroup> <SelectionGroup labelText="Rajaa näytettäviä reseptejä" required>
<Checkbox name="check-requiredresepti" labelText="Kaikki reseptit" defaultChecked />
<Checkbox name="check-requiredresepti" labelText="Lääkettä jäljellä" />
<Checkbox name="check-requiredresepti" 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="radio-invalid-resepti" labelText="Kaikki reseptit" value="kaikki" />
<Radio name="radio-invalid-resepti" labelText="Lääkettä jäljellä" value="jäljellä" />
<Radio name="radio-invalid-resepti" 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="check-invalid-resepti" labelText="Kaikki reseptit" value="kaikki" />
<Checkbox name="check-invalid-resepti" labelText="Lääkettä jäljellä" value="jäljellä" />
<Checkbox name="check-invalid-resepti" labelText="Uusimispyyntö kesken" value="kesken" />
</SelectionGroup> Disabloitu ryhmä
<SelectionGroup labelText="Rajaa näytettäviä reseptejä" disabled>
<Radio name="radio-disabled-resepti" labelText="Kaikki reseptit" value="kaikki" />
<Radio name="radio-disabled-resepti" labelText="Lääkettä jäljellä" value="jäljellä" />
<Radio name="radio-disabled-resepti" labelText="Uusimispyyntö kesken" value="kesken" />
</SelectionGroup> <SelectionGroup labelText="Rajaa näytettäviä reseptejä" disabled>
<Checkbox name="check-disabled-resepti" labelText="Kaikki reseptit" value="kaikki" />
<Checkbox name="check-disabled-resepti" labelText="Lääkettä jäljellä" value="jäljellä" />
<Checkbox name="check-disabled-resepti" labelText="Uusimispyyntö kesken" value="kesken" />
</SelectionGroup> Kaksipalstainen asettelu
<SelectionGroup labelText="Rajaa näytettäviä reseptejä" leftCol={(children) => <Column md={4}>{children}</Column>}>
<Radio name="radio-resepti" labelText="Kaikki reseptit" value="kaikki" defaultChecked />
<Radio name="radio-resepti" labelText="Lääkettä jäljellä" value="jäljellä" />
<Radio name="radio-resepti" labelText="Uusimispyyntö kesken" value="kesken" />
</SelectionGroup> <SelectionGroup labelText="Rajaa näytettäviä reseptejä" leftCol={(children) => <Column md={4}>{children}</Column>}>
<Checkbox name="check-group" labelText="Kaikki reseptit" />
<Checkbox name="check-group" labelText="Lääkettä jäljellä" />
<Checkbox name="check-group" labelText="Uusimispyyntö kesken" />
</SelectionGroup>