Esikatselu
<Multiselect
items={[
{ value: "lorem", label: "Lorem" },
{ value: "ipsum", label: "Ipsum" },
{ value: "dolor", label: "Dolor" },
]}
labelText="Lorem ipsum"
/> Käyttötarkoitus
Multiselect-valintalistan avulla asiakas voi valita yhden tai useamman vaihtoehdon samaan ryhmään kuuluvien vaihtoehtojen joukosta.
Valintalistaa voi käyttää tilanteessa, jossa valittavia vaihtoehtoja on niin paljon, että niiden näyttäminen esimerkiksi valintanappeina veisi liikaa tilaa tai toisi käyttöliittymälle liian paljon kognitiivista kuormaa. Valintalistaa käytettäessä huomio kiinnittyy enemmän tehtyihin valintoihin kuin eri vaihtoehtoihin. Huomioi, että asiakas joutuu aina avaamaan listan ennen vaihtoehtojen vertailua.
Luettele vaihtoehdot loogisessa järjestyksessä, esimerkiksi valinnan yleisyyden mukaan tai aakkosjärjestyksessä. Nimeä vaihtoehdot selkeästi ja ymmärrettävästi, mutta mahdollisimman napakasti. 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 oletusvalintaa ei ole, näytä Valitse-teksti. Ohjeista tarvittaessa asiakasta komponentin käyttöön. Älä käytä Multiselect-valintalistaa, jos valittavia vaihtoehtoja ei ole kovin montaa. Tällöin asiakkaan on nopeampaa valita oikea vaihtoehto suoraan esimerkiksi valintaruuduilla (Checkbox) Saavutettavuus
Komponentin toteuttama käyttöliittymäelementti toimii myös näppäimistöllä ja ruudunlukijalla. Saavutettavuudesta kaivataan palautetta.
Enter Avaa valikon jos kohdistus on valintakomponentissa. Välilyönti Avaa valikon jos kohdistus on valintakomponentissa. Esc Sulkee avoinna olevan valikon. Tab Jos valikko on auki, eikä hakukenttä ole käytössä, sulkee valikon ja siirtää kohdistuksen pois komponentista. Jos hakukenttä on käytössä, siirtää kohdistusta hakukentän ja valintalistan välillä. ↓ Jos valikko on auki ja valintalista on aktiivinen, korostaa seuraavan valinnan. Jos valikko on piilossa, avaa valikon ja korostaa ensimmäisen vaihtoehdon. ↑ Jos valikko on auki, korostaa edellisen valinnan. Jos valikko on piilossa, avaa valikon ja korostaa viimeisen vaihtoehdon. Backspace Poistaa viimeisimmän valinnan valikkoelementin ollessa kohdistettuna ja valikon ollessa suljettu. Home Jos valikko on auki, siirtää kohdistuksen ensimmäiseen valintaan. End Jos valikko on auki, siirtää kohdistuksen viimeiseen valintaan.
Ruudunlukijalle tarkoitettuja ilmoituksia voi muokata antamalla komponentille a11yTextAllItemsRemoved, a11yTextNoSelectedItems ja a11yTextAvailableOptions -propit.
const MultiselectExample = () => {
const items = [
{ value: "ryhmä01", label: "Alkalimetallit" },
{ value: "ryhmä02", label: "Maa-alkalimetallit" },
{ value: "ryhmä03", label: "Lantanoidit" },
{ value: "ryhmä04", label: "Aktinoidit" },
{ value: "ryhmä05", label: "Siirtymäalkuaineet" },
{ value: "ryhmä06", label: "Muut metallit" },
{ value: "ryhmä07", label: "Muut epämetallit" },
{ value: "ryhmä08", label: "Halogeenit" },
{ value: "ryhmä09", label: "Jalokaasut" },
];
return (
<Multiselect
items={items}
labelText="Ryhmä"
a11yTextAllItemsRemoved="Kaikki valinnat poistettu"
a11yTextNoSelectedItems="Ei valintoja"
a11yTextAvailableOptions="Valittavien vaihtoehtojen lukumäärä on ${resultCount}, Valitse vaihtoehto painamalla enter tai välilyönti"
showSearch
inputWidth={(children) => <Column md="6">{children}</Column>}
/>
);
};
render(<MultiselectExample />); Esimerkit
Pakollinen kenttä ja virhetilanne
Kentässä voidaan tarvittaessa näyttää virhetilanne pakollisen arvon puuttuessa.
function MultiselectExample() {
const items = [
{ value: "vammaistuki", label: "16 vuotta täyttäneen vammaistuki" },
{ value: "adoptiotuki", label: "Adoptiotuki" },
{ value: "elatustuki", label: "Elatustuki" },
{ value: "elake_hoitotuki", label: "Eläkettä saavan hoitotuki" },
{ value: "erityishoito", label: "Erityishoitoraha" },
{ value: "lisakuukausi", label: "Lisäkuukauden siirtämisestä ilmoittaminen" },
{ value: "kuntoutus", label: "Kuntoutusraha" },
{ value: "lapsi", label: "Lapsilisä" },
{ value: "lastenhoito", label: "Lastenhoidon tuet" },
{ value: "matka", label: "Matkakorvaus" },
{ value: "opinto", label: "Opintotuki" },
{ value: "opinto_tulovalvonta", label: "Opintotuen tulovalvonnan uudelleenkäsittelypyyntö" },
{ value: "osasairaus", label: "Osasairauspäiväraha" },
{ value: "peruspaiva", label: "Peruspäiväraha" },
{ value: "sairauspaiva", label: "Sairauspäiväraha" },
{ value: "sotilas", label: "Sotilasavustus" },
{ value: "tyomarkkina", label: "Työmarkkinatuki" },
{ value: "tyottomyysaika", label: "Työttömyysajan ilmoitus" },
{ value: "asumis", label: "Yleinen asumistuki" },
{ value: "vanhempain", label: "Vanhempainpäivärahat" },
{ value: "aitiys", label: "Äitiysavustus" },
];
const elementRef = useRef();
const [currentSelectedItems, setCurrentSelectedItems] = useState([]);
const [isInvalid, setIsInvalid] = useState(false);
return (
<>
<Multiselect
errorText="Pakollinen tieto puuttuu. Valitse yksi vaihtoehto."
helpText="Valitse yksi tai useampi etuus."
inputWidth={(children) => <Column md="6">{children}</Column>}
invalid={isInvalid}
items={items}
labelText="Etuudet"
ref={elementRef}
required
onSelectedItemsChange={(selectedItems) => {
setIsInvalid(!selectedItems.length);
setCurrentSelectedItems(selectedItems);
}}
/>
<Button onClick={() => setIsInvalid(!currentSelectedItems.length)}>Lähetä</Button>
</>
);
} Oletusvalinta
Käytä oletusvalintaa, jos sille on turvallinen ja selvästi todennäköisin vaihtoehto. Oletusvalinnan on hyvä olla listassa ensimmäisenä, mikäli se on mahdollista. Komponentti sallii myös useamman oletusvalinnan asettamisen. Mikäli oletusvalintaa ei ole annettu, näytetään painikkeessa placeholder-teksti “(Valitse)”.
<Multiselect
errorText="Pakollinen tieto puuttuu. Valitse yksi vaihtoehto."
helpText="Valitse yksi tai useampi etuus."
inputWidth={(children) => <Column md="6">{children}</Column>}
initialSelectedItems={[{ value: "adoptiotuki", label: "Adoptiotuki" }]}
items={[
{ value: "vammaistuki", label: "16 vuotta täyttäneen vammaistuki" },
{ value: "adoptiotuki", label: "Adoptiotuki" },
{ value: "elatustuki", label: "Elatustuki" },
{ value: "elake_hoitotuki", label: "Eläkettä saavan hoitotuki" },
{ value: "erityishoito", label: "Erityishoitoraha" },
{ value: "lisakuukausi", label: "Lisäkuukauden siirtämisestä ilmoittaminen" },
{ value: "kuntoutus", label: "Kuntoutusraha" },
{ value: "lapsi", label: "Lapsilisä" },
{ value: "lastenhoito", label: "Lastenhoidon tuet" },
{ value: "matka", label: "Matkakorvaus" },
{ value: "opinto", label: "Opintotuki" },
{ value: "opinto_tulovalvonta", label: "Opintotuen tulovalvonnan uudelleenkäsittelypyyntö" },
{ value: "osasairaus", label: "Osasairauspäiväraha" },
{ value: "peruspaiva", label: "Peruspäiväraha" },
{ value: "sairauspaiva", label: "Sairauspäiväraha" },
{ value: "sotilas", label: "Sotilasavustus" },
{ value: "tyomarkkina", label: "Työmarkkinatuki" },
{ value: "tyottomyysaika", label: "Työttömyysajan ilmoitus" },
{ value: "asumis", label: "Yleinen asumistuki" },
{ value: "vanhempain", label: "Vanhempainpäivärahat" },
{ value: "aitiys", label: "Äitiysavustus" },
]}
labelText="Etuudet"
/> Kokovaihtoehdot
<>
<Multiselect
size="xs"
items={[
{ value: "ryhmä01", label: "Lääkettä jäljellä" },
{ value: "ryhmä02", label: "Lääkettä ei jäljellä" },
{ value: "ryhmä03", label: "Uusimispyyntö kesken" },
{ value: "ryhmä04", label: "Vanhenemassa" },
]}
labelText="Multiselect xs-koossa"
/>
<Multiselect
size="sm"
items={[
{ value: "ryhmä01", label: "Lääkettä jäljellä" },
{ value: "ryhmä02", label: "Lääkettä ei jäljellä" },
{ value: "ryhmä03", label: "Uusimispyyntö kesken" },
{ value: "ryhmä04", label: "Vanhenemassa" },
]}
labelText="Multiselect sm-koossa"
/>
<Multiselect
items={[
{ value: "ryhmä01", label: "Lääkettä jäljellä" },
{ value: "ryhmä02", label: "Lääkettä ei jäljellä" },
{ value: "ryhmä03", label: "Uusimispyyntö kesken" },
{ value: "ryhmä04", label: "Vanhenemassa" },
]}
labelText="Multiselect md-koossa (oletus)"
/>
</> Sallittujen valintojen lukumäärän rajoittaminen
Sallittujen valintojen lukumäärää voidaan tarvittaessa rajoittaa hyödyntämällä maxSelectedItems-proppia.
<Multiselect
infoText="Voit tehdä enintään 3 valintaa."
inputWidth={(children) => <Column md="6">{children}</Column>}
items={[
{ value: "vammaistuki", label: "16 vuotta täyttäneen vammaistuki" },
{ value: "adoptiotuki", label: "Adoptiotuki" },
{ value: "elatustuki", label: "Elatustuki" },
{ value: "elake_hoitotuki", label: "Eläkettä saavan hoitotuki" },
{ value: "erityishoito", label: "Erityishoitoraha" },
{ value: "lisakuukausi", label: "Lisäkuukauden siirtämisestä ilmoittaminen" },
{ value: "kuntoutus", label: "Kuntoutusraha" },
{ value: "lapsi", label: "Lapsilisä" },
{ value: "lastenhoito", label: "Lastenhoidon tuet" },
{ value: "matka", label: "Matkakorvaus" },
{ value: "opinto", label: "Opintotuki" },
{ value: "opinto_tulovalvonta", label: "Opintotuen tulovalvonnan uudelleenkäsittelypyyntö" },
{ value: "osasairaus", label: "Osasairauspäiväraha" },
{ value: "peruspaiva", label: "Peruspäiväraha" },
{ value: "sairauspaiva", label: "Sairauspäiväraha" },
{ value: "sotilas", label: "Sotilasavustus" },
{ value: "tyomarkkina", label: "Työmarkkinatuki" },
{ value: "tyottomyysaika", label: "Työttömyysajan ilmoitus" },
{ value: "asumis", label: "Yleinen asumistuki" },
{ value: "vanhempain", label: "Vanhempainpäivärahat" },
{ value: "aitiys", label: "Äitiysavustus" },
]}
labelText="Etuudet"
maxSelectedItems={3}
/> Filter-variantti
Komponentin filter-variantti tuottaa valintapainikkeen, jonka tekstinä näytetään komponentin nimilappu (labelText). Lisäksi painikkeessa näytetään tehtyjen valintojen määrä.
<Multiselect
items={[
{ value: "ryhmä01", label: "Lääkettä jäljellä" },
{ value: "ryhmä02", label: "Lääkettä ei jäljellä" },
{ value: "ryhmä03", label: "Uusimispyyntö kesken" },
{ value: "ryhmä04", label: "Vanhenemassa" },
]}
inputWidth={(children) => <Column md="6">{children}</Column>}
labelText="Rajaa näytettäviä reseptejä"
variant="filter"
/> Hakutoiminto
Komponentissa voidaan tarvittaessa näyttää hakukenttä valintavaihtoehtojen suodattamiseksi. Hakukentän saa näkyville boolean-muotoisen showSearch-propin avulla ja se näytetään avoimen valintalistan yllä.
Kohdistuksen voi siirtää valikon auetessa välittömästi hakukenttään shouldFocusSearch-propilla.
<Multiselect
items={[
{ value: "vammaistuki", label: "16 vuotta täyttäneen vammaistuki" },
{ value: "adoptiotuki", label: "Adoptiotuki" },
{ value: "elatustuki", label: "Elatustuki" },
{ value: "elake_hoitotuki", label: "Eläkettä saavan hoitotuki" },
{ value: "erityishoito", label: "Erityishoitoraha" },
{ value: "lisakuukausi", label: "Lisäkuukauden siirtämisestä ilmoittaminen" },
{ value: "kuntoutus", label: "Kuntoutusraha" },
{ value: "lapsi", label: "Lapsilisä" },
{ value: "lastenhoito", label: "Lastenhoidon tuet" },
{ value: "matka", label: "Matkakorvaus" },
{ value: "opinto", label: "Opintotuki" },
{ value: "opinto_tulovalvonta", label: "Opintotuen tulovalvonnan uudelleenkäsittelypyyntö" },
{ value: "osasairaus", label: "Osasairauspäiväraha" },
{ value: "peruspaiva", label: "Peruspäiväraha" },
{ value: "sairauspaiva", label: "Sairauspäiväraha" },
{ value: "sotilas", label: "Sotilasavustus" },
{ value: "tyomarkkina", label: "Työmarkkinatuki" },
{ value: "tyottomyysaika", label: "Työttömyysajan ilmoitus" },
{ value: "asumis", label: "Yleinen asumistuki" },
{ value: "vanhempain", label: "Vanhempainpäivärahat" },
{ value: "aitiys", label: "Äitiysavustus" },
]}
labelText="Etuudet"
inputWidth={(children) => <Column md="6">{children}</Column>}
shouldFocusSearch
showSearch
/> Estetty kenttä
<Multiselect
disabled
helpText="Valitse yksi tai useampi etuus."
inputWidth={(children) => <Column md="6">{children}</Column>}
items={[
{ value: "vammaistuki", label: "16 vuotta täyttäneen vammaistuki" },
{ value: "adoptiotuki", label: "Adoptiotuki" },
{ value: "elatustuki", label: "Elatustuki" },
]}
labelText="Etuudet"
/> Yksittäisten valintojen estäminen
Yksittäisiä valintoja voi estää asettamalla valinnalle disabled-tilan.
Ruudunlukijalla ei toistaiseksi pääse kohdistamaan estettyihin valintoihin. Vaihtoehtoisesti ne valinnat voi poistaa kokonaan, joita ei pysty valitsemaan.
function MultiselectExample() {
const [selectedItems, setSelectedItems] = useState();
const [items, setItems] = useState([
{ value: "vammaistuki", label: "16 vuotta täyttäneen vammaistuki", disabled: true },
{ value: "adoptiotuki", label: "Adoptiotuki" },
{ value: "elatustuki", label: "Elatustuki", disabled: true },
{ value: "elake_hoitotuki", label: "Eläkettä saavan hoitotuki", disabled: true },
{ value: "erityishoito", label: "Erityishoitoraha" },
{ value: "lisakuukausi", label: "Lisäkuukauden siirtämisestä ilmoittaminen" },
{ value: "kuntoutus", label: "Kuntoutusraha" },
{ value: "lapsi", label: "Lapsilisä" },
{ value: "lastenhoito", label: "Lastenhoidon tuet" },
{ value: "matka", label: "Matkakorvaus" },
{ value: "opinto", label: "Opintotuki" },
{ value: "opinto_tulovalvonta", label: "Opintotuen tulovalvonnan uudelleenkäsittelypyyntö" },
{ value: "osasairaus", label: "Osasairauspäiväraha" },
{ value: "peruspaiva", label: "Peruspäiväraha" },
{ value: "sairauspaiva", label: "Sairauspäiväraha" },
{ value: "sotilas", label: "Sotilasavustus" },
{ value: "tyomarkkina", label: "Työmarkkinatuki" },
{ value: "tyottomyysaika", label: "Työttömyysajan ilmoitus" },
{ value: "asumis", label: "Yleinen asumistuki" },
{ value: "vanhempain", label: "Vanhempainpäivärahat" },
{ value: "aitiys", label: "Äitiysavustus" },
]);
return (
<Multiselect
helpText="Valitse yksi tai useampi etuus."
inputWidth={(children) => <Column md="6">{children}</Column>}
items={items}
labelText="Etuudet"
selectedItems={selectedItems}
onSelectedItemsChange={(items) => {
console.log("selected items", items);
setSelectedItems(items);
}}
/>
);
} Kaksipalstainen asettelu
Kaksipalstaisessa asettelussa tulostetaan leftCol-propilla kentän nimilappu ja aputeksti Column-komponentin sisään. Oikeanpuoleinen palsta täyttää aina vaakasuunnassa nimilapulta jäävän tyhjän tilan.
Pelkän valintaelementin leveyttä voi tarvittaessa lisäksi muuttaa antamalla inputWidth-propin avulla Column-komponentin halutulla leveydellä.
<>
<Multiselect
helpText="Valitse yksi tai useampi etuus."
items={[
{ value: "vammaistuki", label: "16 vuotta täyttäneen vammaistuki" },
{ value: "adoptiotuki", label: "Adoptiotuki" },
{ value: "elatustuki", label: "Elatustuki" },
{ value: "elake_hoitotuki", label: "Eläkettä saavan hoitotuki" },
{ value: "erityishoito", label: "Erityishoitoraha" },
{ value: "lisakuukausi", label: "Lisäkuukauden siirtämisestä ilmoittaminen" },
{ value: "kuntoutus", label: "Kuntoutusraha" },
{ value: "lapsi", label: "Lapsilisä" },
{ value: "lastenhoito", label: "Lastenhoidon tuet" },
{ value: "matka", label: "Matkakorvaus" },
{ value: "opinto", label: "Opintotuki" },
{ value: "opinto_tulovalvonta", label: "Opintotuen tulovalvonnan uudelleenkäsittelypyyntö" },
{ value: "osasairaus", label: "Osasairauspäiväraha" },
{ value: "peruspaiva", label: "Peruspäiväraha" },
{ value: "sairauspaiva", label: "Sairauspäiväraha" },
{ value: "sotilas", label: "Sotilasavustus" },
{ value: "tyomarkkina", label: "Työmarkkinatuki" },
{ value: "tyottomyysaika", label: "Työttömyysajan ilmoitus" },
{ value: "asumis", label: "Yleinen asumistuki" },
{ value: "vanhempain", label: "Vanhempainpäivärahat" },
{ value: "aitiys", label: "Äitiysavustus" },
]}
labelText="Etuudet"
leftCol={(children) => <Column md="4">{children}</Column>}
/>
<Multiselect
helpText="Valitse yksi tai useampi."
infoText="Ilmoita kaikki vaihtoehdot, jotka vastaavat työllisyystilannettasi."
inputWidth={(children) => <Column md="8">{children}</Column>}
items={[
{ value: 1, label: "Osa-aikainen työ" },
{ value: 4, label: "Kokoaikainen työ" },
{ value: 5, label: "Vapaaehtoistyö" },
]}
labelText="Työllisyys"
leftCol={(children) => <Column md="4">{children}</Column>}
/>
</> Valintojen poistaminen komponentin ulkopuolelta
Hyödyntämällä selectedItems-proppia saadaan komponentille välitettyä päivitetyt valinnat, jos niitä on tarpeellista voida poistaa
valintalistan ulkopuolelta. Komponentti ei ota kantaa siihen, miten valinnat komponentin ulkopuolella näytetään,
joten jää kehittäjän vastuulle tarvittaessa varmistaa esitettyjen valintojen ja niiden toiminnan saavutettavuus.
function MultiselectExample() {
const items = [
{ value: "vammaistuki", label: "16 vuotta täyttäneen vammaistuki" },
{ value: "adoptiotuki", label: "Adoptiotuki" },
{ value: "elatustuki", label: "Elatustuki" },
{ value: "elake_hoitotuki", label: "Eläkettä saavan hoitotuki" },
{ value: "erityishoito", label: "Erityishoitoraha" },
{ value: "lisakuukausi", label: "Lisäkuukauden siirtämisestä ilmoittaminen" },
{ value: "kuntoutus", label: "Kuntoutusraha" },
{ value: "lapsi", label: "Lapsilisä" },
{ value: "lastenhoito", label: "Lastenhoidon tuet" },
{ value: "matka", label: "Matkakorvaus" },
{ value: "opinto", label: "Opintotuki" },
{ value: "opinto_tulovalvonta", label: "Opintotuen tulovalvonnan uudelleenkäsittelypyyntö" },
{ value: "osasairaus", label: "Osasairauspäiväraha" },
{ value: "peruspaiva", label: "Peruspäiväraha" },
{ value: "sairauspaiva", label: "Sairauspäiväraha" },
{ value: "sotilas", label: "Sotilasavustus" },
{ value: "tyomarkkina", label: "Työmarkkinatuki" },
{ value: "tyottomyysaika", label: "Työttömyysajan ilmoitus" },
{ value: "asumis", label: "Yleinen asumistuki" },
{ value: "vanhempain", label: "Vanhempainpäivärahat" },
{ value: "aitiys", label: "Äitiysavustus" },
];
const [selectedItems, setSelectedItems] = useState([items[0], items[1]]);
const removeItem = (value) => {
setSelectedItems((prevSelectedItems) => prevSelectedItems.filter((item) => item.value !== value));
};
return (
<>
<Multiselect
items={items}
inputWidth={(children) => <Column md="6">{children}</Column>}
labelText="Etuudet"
variant="filter"
selectedItems={selectedItems}
onSelectedItemsChange={(items) => {
console.log("selected items", items);
setSelectedItems(items);
}}
/>
<List unstyled aria-label="Ryhmää kuvaava nimilappu" className="kds-flex kds-flex-wrap">
{selectedItems.map((item, index) => (
<ListItem key={`${item.value}-${index}`}>
<Chip
label={item.label}
onDelete={() => removeItem(item.value)}
className="kds-mr-2"
deleteButtonAriaLabel={`Poista ${item.label}`}
/>
</ListItem>
))}
</List>
</>
);
} Valitse kaikki -toiminto
Valitse kaikki -toiminnon saa käyttöön antamalla komponentille selectAllLabel-propin. Ruudunlukijan lukemaa tekstiä voi muokata selectAllAriaLabel-propin kautta.
<Multiselect
selectAllLabel="Valitse kaikki"
selectAllAriaLabel="Valitse kaikki valintavaihtoehdot (21 kappaletta)"
labelText="Etuudet"
inputWidth={(children) => <Column md="6">{children}</Column>}
items={[
{ value: "vammaistuki", label: "16 vuotta täyttäneen vammaistuki" },
{ value: "adoptiotuki", label: "Adoptiotuki" },
{ value: "elatustuki", label: "Elatustuki" },
{ value: "elake_hoitotuki", label: "Eläkettä saavan hoitotuki" },
{ value: "erityishoito", label: "Erityishoitoraha" },
{ value: "lisakuukausi", label: "Lisäkuukauden siirtämisestä ilmoittaminen" },
{ value: "kuntoutus", label: "Kuntoutusraha" },
{ value: "lapsi", label: "Lapsilisä" },
{ value: "lastenhoito", label: "Lastenhoidon tuet" },
{ value: "matka", label: "Matkakorvaus" },
{ value: "opinto", label: "Opintotuki" },
{ value: "opinto_tulovalvonta", label: "Opintotuen tulovalvonnan uudelleenkäsittelypyyntö" },
{ value: "osasairaus", label: "Osasairauspäiväraha" },
{ value: "peruspaiva", label: "Peruspäiväraha" },
{ value: "sairauspaiva", label: "Sairauspäiväraha" },
{ value: "sotilas", label: "Sotilasavustus" },
{ value: "tyomarkkina", label: "Työmarkkinatuki" },
{ value: "tyottomyysaika", label: "Työttömyysajan ilmoitus" },
{ value: "asumis", label: "Yleinen asumistuki" },
{ value: "vanhempain", label: "Vanhempainpäivärahat" },
{ value: "aitiys", label: "Äitiysavustus" },
]}
onSelectedItemsChange={(items) => {
console.log("selected items", items);
}}
/> Valitse kaikki -toiminnon voi yhdistää hakutoimintoon, jolloin valitaan ja poistetaan vain näkyvät vaihtoehdot.
function MultiselectExample() {
const items = [
{ value: "vammaistuki", label: "16 vuotta täyttäneen vammaistuki" },
{ value: "adoptiotuki", label: "Adoptiotuki" },
{ value: "elatustuki", label: "Elatustuki" },
{ value: "elake_hoitotuki", label: "Eläkettä saavan hoitotuki" },
{ value: "erityishoito", label: "Erityishoitoraha" },
{ value: "lisakuukausi", label: "Lisäkuukauden siirtämisestä ilmoittaminen" },
{ value: "kuntoutus", label: "Kuntoutusraha" },
{ value: "lapsi", label: "Lapsilisä" },
{ value: "lastenhoito", label: "Lastenhoidon tuet" },
{ value: "matka", label: "Matkakorvaus" },
{ value: "opinto", label: "Opintotuki" },
{ value: "opinto_tulovalvonta", label: "Opintotuen tulovalvonnan uudelleenkäsittelypyyntö" },
{ value: "osasairaus", label: "Osasairauspäiväraha" },
{ value: "peruspaiva", label: "Peruspäiväraha" },
{ value: "sairauspaiva", label: "Sairauspäiväraha" },
{ value: "sotilas", label: "Sotilasavustus" },
{ value: "tyomarkkina", label: "Työmarkkinatuki" },
{ value: "tyottomyysaika", label: "Työttömyysajan ilmoitus" },
{ value: "asumis", label: "Yleinen asumistuki" },
{ value: "vanhempain", label: "Vanhempainpäivärahat" },
{ value: "aitiys", label: "Äitiysavustus" },
];
const [filteredItems, setFilteredItems] = useState(items.length);
const isFiltered = filteredItems.length < items.length;
return (
<Multiselect
selectAllLabel={isFiltered ? "Valitse kaikki suodatetut" : "Valitse kaikki"}
selectAllAriaLabel={
isFiltered
? `Valitse kaikki suodatetut valintavaihtoehdot (${filteredItems.length} kappaletta)`
: `Valitse kaikki valintavaihtoehdot (${filteredItems.length} kappaletta)`
}
showSearch
labelText="Etuudet (suodatus)"
inputWidth={(children) => <Column md="6">{children}</Column>}
items={items}
onSelectedItemsChange={(items) => {
console.log("selected items", items);
}}
onFilteredItemsChange={(items) => {
console.log("filtered items", items);
setFilteredItems(items);
}}
/>
);
} Estettyjen valintojen tilaa ei muuteta, kun valitaan valitse kaikki.
<Multiselect
selectAllLabel="Valitse kaikki"
selectAllAriaLabel="Valitse kaikki valintavaihtoehdot (21 kappaletta)"
initialSelectedItems={[
{ value: "vammaistuki", label: "16 vuotta täyttäneen vammaistuki", disabled: true },
{ value: "adoptiotuki", label: "Adoptiotuki", disabled: true },
]}
showSearch
labelText="Etuudet (estetyt valinnat)"
inputWidth={(children) => <Column md="6">{children}</Column>}
items={[
{ value: "vammaistuki", label: "16 vuotta täyttäneen vammaistuki", disabled: true },
{ value: "adoptiotuki", label: "Adoptiotuki", disabled: true },
{ value: "elatustuki", label: "Elatustuki", disabled: true },
{ value: "elake_hoitotuki", label: "Eläkettä saavan hoitotuki", disabled: true },
{ value: "erityishoito", label: "Erityishoitoraha" },
{ value: "lisakuukausi", label: "Lisäkuukauden siirtämisestä ilmoittaminen" },
{ value: "kuntoutus", label: "Kuntoutusraha" },
{ value: "lapsi", label: "Lapsilisä" },
{ value: "lastenhoito", label: "Lastenhoidon tuet" },
{ value: "matka", label: "Matkakorvaus" },
{ value: "opinto", label: "Opintotuki" },
{ value: "opinto_tulovalvonta", label: "Opintotuen tulovalvonnan uudelleenkäsittelypyyntö" },
{ value: "osasairaus", label: "Osasairauspäiväraha" },
{ value: "peruspaiva", label: "Peruspäiväraha" },
{ value: "sairauspaiva", label: "Sairauspäiväraha" },
{ value: "sotilas", label: "Sotilasavustus" },
{ value: "tyomarkkina", label: "Työmarkkinatuki" },
{ value: "tyottomyysaika", label: "Työttömyysajan ilmoitus" },
{ value: "asumis", label: "Yleinen asumistuki" },
{ value: "vanhempain", label: "Vanhempainpäivärahat" },
{ value: "aitiys", label: "Äitiysavustus" },
]}
onSelectedItemsChange={(items) => {
console.log("selected items", items);
}}
/> Valintojen ryhmittely
Ryhmittelyn saavutettavuutta ei ole vielä varmistettu kattavasti.
Valinnat voi ryhmitellä groupBy-funktion avulla. Alla olevassa esimerkissä valinnat asetetaan ensimmäisen kirjaimen perusteella ryhmiin.
<Multiselect
items={[
{ value: "adoptiotuki", label: "Adoptiotuki" },
{ value: "elatustuki", label: "Elatustuki" },
{ value: "elake_hoitotuki", label: "Eläkettä saavan hoitotuki" },
{ value: "erityishoito", label: "Erityishoitoraha" },
{ value: "lisakuukausi", label: "Lisäkuukauden siirtämisestä ilmoittaminen" },
{ value: "kuntoutus", label: "Kuntoutusraha" },
{ value: "lapsi", label: "Lapsilisä" },
{ value: "lastenhoito", label: "Lastenhoidon tuet" },
{ value: "matka", label: "Matkakorvaus" },
{ value: "opinto", label: "Opintotuki" },
{ value: "opinto_tulovalvonta", label: "Opintotuen tulovalvonnan uudelleenkäsittelypyyntö" },
{ value: "osasairaus", label: "Osasairauspäiväraha" },
{ value: "peruspaiva", label: "Peruspäiväraha" },
{ value: "sairauspaiva", label: "Sairauspäiväraha" },
{ value: "sotilas", label: "Sotilasavustus" },
{ value: "tyomarkkina", label: "Työmarkkinatuki" },
{ value: "tyottomyysaika", label: "Työttömyysajan ilmoitus" },
{ value: "asumis", label: "Yleinen asumistuki" },
{ value: "vanhempain", label: "Vanhempainpäivärahat" },
{ value: "aitiys", label: "Äitiysavustus" },
]}
labelText="Etuudet"
inputWidth={(children) => <Column md="6">{children}</Column>}
groupBy={(items) => {
return Object.entries(
items.reduce<Record<string, MultiselectOptions>>((acc, item) => {
const key = item.label[0].toUpperCase();
if (!acc[key]) acc[key] = [];
acc[key].push(item);
return acc;
}, {})
)
.sort(([a], [b]) => a.localeCompare(b))
.map(([name, items]) => ({ name, items }));
}}
shouldFocusSearch
showSearch
/> Ryhmän otsikkoa voi muokata renderOptionGroupHeader-propin avulla.
<Multiselect
items={[
{ value: "adoptiotuki", label: "Adoptiotuki" },
{ value: "elatustuki", label: "Elatustuki" },
{ value: "elake_hoitotuki", label: "Eläkettä saavan hoitotuki" },
{ value: "erityishoito", label: "Erityishoitoraha" },
{ value: "lisakuukausi", label: "Lisäkuukauden siirtämisestä ilmoittaminen" },
{ value: "kuntoutus", label: "Kuntoutusraha" },
{ value: "lapsi", label: "Lapsilisä" },
{ value: "lastenhoito", label: "Lastenhoidon tuet" },
{ value: "matka", label: "Matkakorvaus" },
{ value: "opinto", label: "Opintotuki" },
{ value: "opinto_tulovalvonta", label: "Opintotuen tulovalvonnan uudelleenkäsittelypyyntö" },
{ value: "osasairaus", label: "Osasairauspäiväraha" },
{ value: "peruspaiva", label: "Peruspäiväraha" },
{ value: "sairauspaiva", label: "Sairauspäiväraha" },
{ value: "sotilas", label: "Sotilasavustus" },
{ value: "tyomarkkina", label: "Työmarkkinatuki" },
{ value: "tyottomyysaika", label: "Työttömyysajan ilmoitus" },
{ value: "asumis", label: "Yleinen asumistuki" },
{ value: "vanhempain", label: "Vanhempainpäivärahat" },
{ value: "aitiys", label: "Äitiysavustus" },
]}
labelText="Etuudet"
inputWidth={(children) => <Column md="6">{children}</Column>}
groupBy={(items) => {
return Object.entries(
items.reduce<Record<string, MultiselectOptions>>((acc, item) => {
const key = item.label[0].toUpperCase();
if (!acc[key]) acc[key] = [];
acc[key].push(item);
return acc;
}, {})
)
.sort(([a], [b]) => a.localeCompare(b))
.map(([name, items]) => ({ name, items }));
}}
renderOptionGroupHeader={({ groupHeaderId, groupName }) => (
<MultiselectOptionGroupHeader id={groupHeaderId}>{groupName}</MultiselectOptionGroupHeader>
)}
/>