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.
Jos valikko on auki, valitsee tai poistaa korostetun valinnan. |
| Välilyönti | Avaa valikon jos kohdistus on valintakomponentissa.
Jos valikko on auki, valitsee tai poistaa korostetun valinnan. |
| 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.
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 MultiselectExample = () => {
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>
</>
);
};
render(<MultiselectExample />);
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"
/>
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ä.
<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>}
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.
const 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);
}}
/>
);
};
render(<MultiselectExample />);
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.
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 MultiselectExample = () => {
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);
}}
/>
{selectedItems.map((item, index) => (
<Chip
key={`${item.value}-${index}`}
label={item.label}
onDelete={() => removeItem(item.value)}
className="kds-mb-2 kds-mr-2"
deleteButtonAriaLabel={`Poista ${item.label}`}
/>
))}
</>
);
};
render(<MultiselectExample />);
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.
() => {
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);
}}
/>