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> 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.
const SelectionGroupExample = () => {
const [selected, setSelected] = useState({ recipe1: false, recipe2: false, recipe3: false });
const isAnySelected = selected.recipe1 || selected.recipe2 || selected.recipe3;
const handleOnChange = (event) => {
setSelected({ ...selected, [event.target.name]: event.target.checked });
};
return (
<SelectionGroup labelText="Rajaa näytettäviä reseptejä" requiredLabel="Pakollinen tieto" requiredGroup>
<Checkbox
name="recipe1"
requiredGroup={!isAnySelected}
labelText="Kaikki reseptit"
value="kaikki"
onChange={handleOnChange}
checked={selected.recipe1}
/>
<Checkbox
name="recipe2"
requiredGroup={!isAnySelected}
labelText="Lääkettä jäljellä"
value="jäljellä"
onChange={handleOnChange}
checked={selected.recipe2}
/>
<Checkbox
name="recipe3"
requiredGroup={!isAnySelected}
labelText="Uusimispyyntö kesken"
value="kesken"
onChange={handleOnChange}
checked={selected.recipe3}
/>
</SelectionGroup>
);
};
render(<SelectionGroupExample />); 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>