Komponentti on edelleen kehityksessä, joten sen API ja ominaisuudet saattavat vielä muuttua.
Esikatselu
<MultiselectV2
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
Komponentti lisää saavutettavuuden kannalta tarvittavat attribuutit HTML-elementeille.
Komponentti siirtää kohdistusta painikkeen ja valintalistan välillä. Listan kohteiden virtuaalinen kohdistus tapahtuu aria-activedescendant-attribuutin avulla.
Komponentin saa myös käyttämään normaalia kohdistusta a11yOptions.isVirtual-propin avulla.
Ruudunlukijalle tarkoitettuja ilmoituksia voi muokata localization-propin kautta annettavalla objektilla.
function ExampleMultiselectV2() {
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" },
];
return (
<MultiselectV2
inputWidth={(children) => (
<Column md={8} lg={8} xl={6}>
{children}
</Column>
)}
items={items}
labelText="Etuudet"
localization={{
itemsRemoved: "Valinnat poistettu",
itemsSelected: "Valittu",
noSelectedItems: "Ei valintoja",
searchInputPlaceholder: "Suodata valintoja",
searchResultsNotFound: "Ei tuloksia",
searchResultsAvailable: ({ selectableResultCount }) =>
`Valittavien vaihtoehtojen lukumäärä on ${selectableResultCount}. Käytä nuoli ylös ja nuoli alas -näppäimiä siirtyäksesi vaihtoehtojen välillä. Valitse vaihtoehto painamalla Enter- tai välilyönti-näppäintä.`,
resetButtonLabel: "Tyhjennä valinnat",
selectAllAriaLabel: "Valitse kaikki",
selectAllLabel: "Valitse kaikki",
}}
showSearch
/>
);
} Esimerkit
Pakollinen kenttä ja virhetilanne
Kentässä voidaan tarvittaessa näyttää virhetilanne pakollisen arvon puuttuessa.
function ExampleMultiselectV2() {
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 ref = useRef();
const [selectedItems, setSelectedItems] = useState([]);
const [isInvalid, setIsInvalid] = useState(false);
const handleSubmit = () => {
setIsInvalid(!selectedItems.length);
if (!selectedItems.length) {
ref.current.focus();
}
};
const handleChange = (items) => {
setIsInvalid(!items.length);
setSelectedItems(items);
};
return (
<>
<MultiselectV2
errorText="Valitse vastaus."
helpText="Valitse yksi tai useampi etuus."
inputWidth={(children) => (
<Column md={8} lg={8} xl={6}>
{children}
</Column>
)}
invalid={isInvalid}
items={items}
labelText="Etuudet"
onChange={handleChange}
ref={ref}
required
requiredLabel="Pakollinen tieto"
/>
<Button onClick={handleSubmit}>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)”.
<MultiselectV2
defaultValue={[{ value: "adoptiotuki", label: "Adoptiotuki" }]}
errorText="Pakollinen tieto puuttuu. Valitse yksi vaihtoehto."
helpText="Valitse yksi tai useampi etuus."
labelText="Etuudet"
inputWidth={(children) => (
<Column md={8} lg={8} xl={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" },
]}
/> Kokovaihtoehdot
Pienin koko (xs) on tarkoitettu tiivistä asettelua vaativiin asiantuntijakäyttöliittymiin.
<>
<MultiselectV2
size="xs"
inputWidth={(children) => (
<Column md={8} lg={8} xl={6}>
{children}
</Column>
)}
items={[
{ value: "1", label: "Lääkettä jäljellä" },
{ value: "2", label: "Lääkettä ei jäljellä" },
{ value: "3", label: "Uusimispyyntö kesken" },
{ value: "4", label: "Vanhenemassa" },
]}
labelText="Multiselect xs-koossa"
helpText="Valitse yksi tai useampi."
showSearch
showSelectAll
/>
<MultiselectV2
size="sm"
inputWidth={(children) => (
<Column md={8} lg={8} xl={6}>
{children}
</Column>
)}
items={[
{ value: "1", label: "Lääkettä jäljellä" },
{ value: "2", label: "Lääkettä ei jäljellä" },
{ value: "3", label: "Uusimispyyntö kesken" },
{ value: "4", label: "Vanhenemassa" },
]}
labelText="Multiselect sm-koossa"
helpText="Valitse yksi tai useampi."
showSearch
showSelectAll
/>
<MultiselectV2
inputWidth={(children) => (
<Column md={8} lg={8} xl={6}>
{children}
</Column>
)}
items={[
{ value: "1", label: "Lääkettä jäljellä" },
{ value: "2", label: "Lääkettä ei jäljellä" },
{ value: "3", label: "Uusimispyyntö kesken" },
{ value: "4", label: "Vanhenemassa" },
]}
labelText="Multiselect md-koossa (oletus)"
helpText="Valitse yksi tai useampi."
showSearch
showSelectAll
/>
</> Sallittujen valintojen lukumäärän rajoittaminen
Sallittujen valintojen lukumäärää voidaan tarvittaessa rajoittaa hyödyntämällä maxSelectedItems-proppia.
<MultiselectV2
infoText="Voit tehdä enintään 3 valintaa."
inputWidth={(children) => (
<Column md={8} lg={8} xl={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}
/> Yksittäisten valintojen estäminen
Yksittäisten valintavaihtoehtojen valitsemisen voi estää asettamalla niille disabled-tilan.
Estettyihin valintoihin voi oletuksena kohdistaa. Tämän voi estää shouldFocusDisabledOptions-propilla.
function ExampleMultiselectV2() {
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", disabled: true },
{ value: "lapsi", label: "Lapsilisä", disabled: true },
{ 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 (
<MultiselectV2
helpText="Valitse yksi tai useampi etuus."
inputWidth={(children) => (
<Column md={8} lg={8} xl={6}>
{children}
</Column>
)}
items={items}
labelText="Etuudet"
value={selectedItems}
onChange={(items) => {
console.log("selected items", items);
setSelectedItems(items);
}}
/>
);
} Suodatin
Komponentin isFilter-prop tuottaa valintapainikkeen, jonka tekstinä näytetään komponentin nimilappu (labelText), sekä valintojen määrä.
<MultiselectV2
items={[
{ value: "1", label: "Lääkettä jäljellä" },
{ value: "2", label: "Lääkettä ei jäljellä" },
{ value: "3", label: "Uusimispyyntö kesken" },
{ value: "4", label: "Vanhenemassa" },
]}
inputWidth={(children) => (
<Column md={8} lg={8} xl={6}>
{children}
</Column>
)}
isFilter
labelText="Rajaa näytettäviä reseptejä"
/> 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.
Hakutoiminnon suodatukseen ja järjestykseen voi tarvittaessa vaikuttaa filterItems-propin kautta annettavalla funktiolla.
<MultiselectV2
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={8} lg={8} xl={6}>
{children}
</Column>
)}
shouldFocusSearch
showSearch
/> Estetty kenttä
<MultiselectV2
disabled
helpText="Valitse yksi tai useampi etuus."
inputWidth={(children) => (
<Column md={8} lg={8} xl={6}>
{children}
</Column>
)}
items={[
{ value: "vammaistuki", label: "16 vuotta täyttäneen vammaistuki" },
{ value: "adoptiotuki", label: "Adoptiotuki" },
{ value: "elatustuki", label: "Elatustuki" },
]}
labelText="Etuudet"
/> 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ä.
<>
<MultiselectV2
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>}
/>
<MultiselectV2
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 päivittäminen komponentin ulkopuolelta
Hyödyntämällä value- ja onChange-proppeja voidaan valintoja kontrolloida komponentin ulkopuolelta.
Alla oleva esimerkki toteuttaa listan, joka näyttää Chip
function ExampleMultiselectV2() {
const ref = useRef<HTMLButtonElement>(undefined);
const chipListRef = useRef<HTMLUListElement>([]);
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 handleDelete = (deletedItem) => {
setSelectedItems((prevSelectedItems) => {
const newSelectedItems = prevSelectedItems.filter((item) => item.value !== deletedItem.value);
requestAnimationFrame(() => {
if (newSelectedItems.length === 0) {
ref.current?.focus();
return;
}
const deletedIndex = prevSelectedItems.indexOf(deletedItem);
const prevChip = chipListRef.current?.[deletedIndex - 1];
const firstChip = chipListRef.current?.[0];
if (prevChip) {
prevChip?.querySelector("button")?.focus();
return;
}
if (firstChip) {
firstChip?.querySelector("button")?.focus();
} else {
ref.current?.focus();
}
});
return newSelectedItems;
});
};
return (
<>
<MultiselectV2
items={items}
inputWidth={(children) => (
<Column md={8} lg={8} xl={6}>
{children}
</Column>
)}
labelText="Etuudet"
onChange={setSelectedItems}
ref={ref}
value={selectedItems}
/>
<List unstyled aria-label="Ryhmää kuvaava nimilappu" className="kds-flex kds-flex-wrap kds-mb-0">
{selectedItems.map((item, index) => (
<ListItem key={item.value}>
<Chip
label={item.label}
onDelete={() => handleDelete(item)}
ref={(el) => {
chipListRef.current[index] = el;
}}
className="kds-mr-2"
deleteButtonAriaLabel={`Poista ${item.label}`}
/>
</ListItem>
))}
</List>
</>
);
} Valikon renderöinti Portalin avulla
Valikko voidaan renderöidä HTML-rakenteessa sivun loppuun usePortal-proppia käyttäen. Tämä on tarpeellista silloin, kun ympäröivä elementti ei salli sisällön näyttämistä sen ulkopuolella.
<Chat>
<ChatMessage position="right">
<MultiselectV2
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"
usePortal
/>
</ChatMessage>
</Chat> Valitse kaikki -toiminto
Valitse kaikki -toiminnon saa käyttöön antamalla komponentille showSelectAll-propin. Oletustekstejä voi muokata localization-propin kautta.
<MultiselectV2
labelText="Etuudet"
localization={{
selectAllLabel: "Valitse kaikki",
selectAllAriaLabel: "Valitse kaikki valintavaihtoehdot (21 kappaletta)",
}}
showSelectAll
inputWidth={(children) => (
<Column md={8} lg={8} xl={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" },
]}
onChange={(items) => {
console.log("selected items", items);
}}
/> Valitse kaikki -toiminnon voi yhdistää hakutoimintoon, jolloin valitaan ja poistetaan vain näkyvät vaihtoehdot.
function ExampleMultiselectV2() {
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);
const isFiltered = filteredItems.length < items.length;
return (
<MultiselectV2
localization={{
selectAllLabel: isFiltered ? "Valitse kaikki suodatetut" : "Valitse kaikki",
selectAllAriaLabel: isFiltered
? `Valitse kaikki suodatetut valintavaihtoehdot (${filteredItems.length} kappaletta)`
: `Valitse kaikki valintavaihtoehdot (${filteredItems.length} kappaletta)`,
}}
showSelectAll
showSearch
labelText="Etuudet (suodatus)"
inputWidth={(children) => (
<Column md={8} lg={8} xl={6}>
{children}
</Column>
)}
items={items}
onChange={(items) => {
console.log("selected items", items);
}}
onFilter={(items) => {
console.log("filtered items", items);
setFilteredItems(items);
}}
/>
);
} Estettyjen valintojen tilaa ei muuteta, kun valitaan valitse kaikki.
<MultiselectV2
localization={{
selectAllLabel: "Valitse kaikki",
selectAllAriaLabel: "Valitse kaikki valintavaihtoehdot (21 kappaletta)",
}}
defaultValue={[
{ value: "vammaistuki", label: "16 vuotta täyttäneen vammaistuki", disabled: true },
{ value: "adoptiotuki", label: "Adoptiotuki", disabled: true },
]}
showSearch
showSelectAll
labelText="Etuudet (estetyt valinnat)"
inputWidth={(children) => (
<Column md={8} lg={8} xl={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" },
]}
onChange={(items) => {
console.log("selected items", items);
}}
/> Valintojen ryhmittely
Ruudunlukijat lukevat ryhmät ja niihin kuuluvien valintojen määrän hieman eri tavalla ruudunlukijasta riippuen.
Valinnat voi ryhmitellä groupBy-funktion avulla. Alla olevassa esimerkissä valinnat asetetaan ensimmäisen kirjaimen perusteella ryhmiin.
<MultiselectV2
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={8} lg={8} xl={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.
<MultiselectV2
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={8} lg={8} xl={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 }) => (
<MultiselectV2OptionGroupHeader id={groupHeaderId}>{groupName}</MultiselectOptionGroupHeader>
)}
/> Huomioitavaa selaintuessa