Esikatselu
<ComboboxV2 dropdown labelText="Lorem ipsum">
<ComboboxV2Menu>
<ComboboxV2MenuOption value="dolor" label="Dolor sit amet" />
<ComboboxV2MenuOption value="mauris" label="Mauris varius diam" />
<ComboboxV2MenuOption value="consectetur" label="Consectetur adipiscing" />
</ComboboxV2Menu>
</ComboboxV2> Käyttötarkoitus
ComboboxV2 on tekstikentän ja valintalistan yhdistelmä, joka ehdottaa käyttäjälle listasta löytyviä vaihtoehtoja sen
perustella, mitä käyttäjä tekstikenttään kirjoittaa. Automaattinen täydennys ehdottaa sopivia vaihtoehtoja
reaaliaikaisesti samalla, kun käyttäjä kirjoittaa tekstikenttään merkkejä.
Sopivat vaihtoehdot näytetään
valintalistassa. Automaattinen täydennys nopeuttaa oikean vaihtoehdon löytämistä tilanteissa, joissa valittavia
vaihtoehtoja on paljon ja niiden selaaminen valintalistasta olisi työlästä.
Automaattinen täydennys voi aloittaa haun heti ensimmäisestä kirjoitetusta merkistä tai tietyn merkkimäärän jälkeen.
Jos esimerkiksi haetaan suomalaisella IBAN-tilinumerolla, haku kannattaa aloittaa vasta kolmannesta merkistä, koska
kaikki tilinumerot alkavat samalla FI-etuliitteellä.
Kirjoitetun merkkijonon ei kuitenkaan tarvitse löytyä heti sanan alusta, vaan käyttäjä voi hakea myös sanan loppuosalla.
Tarvittaessa komponentin voi asettaa näyttämään vain ehdotuksia, jotka alkavat annetulla merkkijonolla.
Käytä komponenttia, kun valintalistassa on paljon arvoja, ja käyttäjä tietää selkeästi, minkä vaihtoehdon hän haluaa valita (esimerkiksi luettelo valtioista tai diagnooseista). Käytä komponenttia, kun haluat ehdottaa käyttäjälle sopivia vaihtoehtoja isosta joukosta (esim. hakukenttä). Ohjeista tarvittaessa käyttäjää komponentin käyttöön. Luettele vaihtoehdot loogisessa järjestyksessä, esimerkiksi valinnan yleisyyden mukaan tai aakkosjärjestyksessä. Nimeä vaihtoehdot selkeästi ja ymmärrettävästi, mutta mahdollisimman napakasti. Saavutettavuus
Komponentti toteuttaa teknisesti saavutettavan combobox-käyttöliittymäelementin.
Komponentille voidaan asettaa seuraavat arvot ruudunlukijaa varten:
() => {
useEffect(() => {
const observer = new MutationObserver(() => {
const announcement = document.querySelector('[data-testid="a11y-example-sr-announcement"]').textContent;
if (announcement) {
document.querySelector("#a11y-example-announcement").textContent = announcement;
}
});
observer.observe(document.querySelector('[data-testid="a11y-example-sr-announcement"]'), {
characterData: true,
childList: true,
});
return () => {
observer.disconnect();
};
}, []);
return (
<>
<Box className="kds-p-4" variant="primary">
Ruudunlukijan lukema teksti: <strong id="a11y-example-announcement">-</strong>
</Box>
<ComboboxV2
id="a11y-example"
a11yOptions={{
resultsNotFound: "Valintavaihtoehtoja ei löytynyt",
resultsFound: (count) =>
count === 1
? `Valintavaihtoehtoja löytyi ${count} kappale`
: `Valintavaihtoehtoja löytyi ${count} kappaletta`,
resultsDelayAfterType: 2000,
resultsEnabled: true,
selectedLabel: "Valittu etuus",
nothingIsSelectedLabel: "Valittu etuus poistettu",
toggleButtonCloseLabel: "Sulje valintavaihtoehdot",
toggleButtonOpenLabel: "Avaa valintavaihtoehdot",
resetButtonLabel: "Poista valinta",
}}
allowOnlyListedValues
helpText="Kirjoita ja valitse etuus"
inputWidth={(children) => (
<Column md={8} lg={6}>
{children}
</Column>
)}
labelText="Etuus"
threshold={1}
dropdown
>
<ComboboxV2Menu>
{[
{ value: "16 vuotta täyttäneen vammaistuki" },
{ value: "Adoptiotuki" },
{ value: "Elatustuki" },
{ value: "Eläkettä saavan hoitotuki" },
{ value: "Erityishoitoraha" },
{ value: "Isäkuukauden siirtämisestä ilmoittaminen" },
{ value: "Kuntoutusraha" },
{ value: "Lapsilisä" },
{ value: "Lastenhoidon tuet" },
{ value: "Matkakorvaus" },
{ value: "Opintotuki" },
{ value: "Opintotuen tulovalvonnan uudelleenkäsittelypyyntö" },
{ value: "Osasairauspäiväraha" },
{ value: "Peruspäiväraha" },
{ value: "Sairauspäiväraha" },
{ value: "Sotilasavustus" },
{ value: "Työmarkkinatuki" },
{ value: "Työttömyysajan ilmoitus" },
{ value: "Yleinen asumistuki" },
{ value: "Vanhempainpäivärahat" },
{ value: "Äitiysavustus" },
].map(({ value }) => (
<ComboboxV2MenuOption key={value} value={value} />
))}
</ComboboxV2Menu>
</ComboboxV2>
</>
);
}; Tekstikenttä
Käytä automaattisella täydennyksellä varustettua tekstikenttää silloin, kun haluat helpottaa
käyttäjän työtä tarjoamalla sopivia ehdotuksia (esim. hakukenttä). Käytä komponenttia kuten
mitä tahansa tekstikenttää. Käyttäjä voi valita komponentin ehdottamista vaihtoehdoista sopivan
tai kirjoittaa kenttään oman arvon. Kenttään syötetyn tekstin validointi jää lomakkeen kehittäjän tehtäväksi.
// Maat ja valtiot testidataa stat.fi:stä
const countries = [
{ value: "AFG", name: "Afganistan" },
{ value: "ALA", name: "Ahvenanmaa" },
{ value: "NLD", name: "Alankomaat" },
{ value: "ANT", name: "Alankomaiden Antillit" },
{ value: "AL", name: "Albania" },
{ value: "DZ", name: "Algeria" },
{ value: "AS", name: "Amerikan Samoa" },
{ value: "AD", name: "Andorra" },
{ value: "AO", name: "Angola" },
{ value: "AI", name: "Anguilla" },
{ value: "AQ", name: "Antarktis" },
{ value: "AG", name: "Antigua ja Barbuda" },
{ value: "AE", name: "Arabiemiirikunnat" },
{ value: "AR", name: "Argentiina" },
{ value: "AM", name: "Armenia" },
{ value: "AW", name: "Aruba" },
{ value: "AU", name: "Australia" },
{ value: "AZ", name: "Azerbaidžan" },
{ value: "BS", name: "Bahama" },
{ value: "BH", name: "Bahrain" },
{ value: "BD", name: "Bangladesh" },
{ value: "BB", name: "Barbados" },
{ value: "BE", name: "Belgia" },
{ value: "BZ", name: "Belize" },
{ value: "BJ", name: "Benin" },
{ value: "BM", name: "Bermuda" },
{ value: "BT", name: "Bhutan" },
{ value: "BO", name: "Bolivia" },
{ value: "BA", name: "Bosnia ja Hertsegovina" },
{ value: "BW", name: "Botswana" },
{ value: "BV", name: "Bouvet’nsaari" },
{ value: "BR", name: "Brasilia" },
{ value: "GB", name: "Britannia" },
{ value: "IO", name: "Brittiläinen Intian valtameren alue" },
{ value: "VG", name: "Brittiläiset Neitsytsaaret" },
{ value: "BN", name: "Brunei" },
{ value: "BG", name: "Bulgaria" },
{ value: "BF", name: "Burkina Faso" },
{ value: "BI", name: "Burundi" },
{ value: "KY", name: "Caymansaaret" },
{ value: "CL", name: "Chile" },
{ value: "CK", name: "Cookinsaaret" },
{ value: "CR", name: "Costa Rica" },
{ value: "DJ", name: "Djibouti" },
{ value: "DM", name: "Dominica" },
{ value: "DO", name: "Dominikaaninen tasavalta" },
{ value: "EC", name: "Ecuador" },
{ value: "EG", name: "Egypti" },
{ value: "SV", name: "El Salvador" },
{ value: "ER", name: "Eritrea" },
{ value: "ES", name: "Espanja" },
{ value: "ZA", name: "Etelä-Afrikka" },
{ value: "GS", name: "Etelä-Georgia ja Eteläiset Sandwichsaaret" },
{ value: "ET", name: "Etiopia" },
{ value: "FK", name: "Falklandinsaaret" },
{ value: "FJ", name: "Fidži" },
{ value: "PH", name: "Filippiinit" },
{ value: "FO", name: "Färsaaret" },
{ value: "GA", name: "Gabon" },
{ value: "GM", name: "Gambia" },
{ value: "GE", name: "Georgia" },
{ value: "GH", name: "Ghana" },
{ value: "GI", name: "Gibraltar" },
{ value: "GD", name: "Grenada" },
{ value: "GL", name: "Grönlanti" },
{ value: "GP", name: "Guadeloupe" },
{ value: "GU", name: "Guam" },
{ value: "GT", name: "Guatemala" },
{ value: "GG", name: "Guernsey" },
{ value: "GN", name: "Guinea" },
{ value: "GW", name: "Guinea-Bissau" },
{ value: "GY", name: "Guyana" },
{ value: "HT", name: "Haiti" },
{ value: "HM", name: "Heard ja McDonaldinsaaret" },
{ value: "HN", name: "Honduras" },
{ value: "HK", name: "Hongkong" },
{ value: "ID", name: "Indonesia" },
{ value: "IN", name: "Intia" },
{ value: "IQ", name: "Irak" },
{ value: "IR", name: "Iran" },
{ value: "IE", name: "Irlanti" },
{ value: "IS", name: "Islanti" },
{ value: "IL", name: "Israel" },
{ value: "IT", name: "Italia" },
{ value: "TL", name: "Itä-Timor" },
{ value: "AT", name: "Itävalta" },
{ value: "JM", name: "Jamaika" },
{ value: "JP", name: "Japani" },
{ value: "YE", name: "Jemen" },
{ value: "JE", name: "Jersey" },
{ value: "JO", name: "Jordania" },
{ value: "CX", name: "Joulusaari" },
{ value: "KH", name: "Kambodža" },
{ value: "CM", name: "Kamerun" },
{ value: "CA", name: "Kanada" },
{ value: "CV", name: "Kap Verde" },
{ value: "KZ", name: "Kazakstan" },
{ value: "KE", name: "Kenia" },
{ value: "CF", name: "Keski-Afrikan tasavalta" },
{ value: "CN", name: "Kiina" },
{ value: "KG", name: "Kirgisia" },
{ value: "KI", name: "Kiribati" },
{ value: "CO", name: "Kolumbia" },
{ value: "KM", name: "Komorit" },
{ value: "CG", name: "Kongo (Kongo-Brazzaville)" },
{ value: "CD", name: "Kongo (Kongo-Kinshasa)" },
{ value: "CC", name: "Kookossaaret" },
{ value: "KP", name: "Korean demokraattinen kansantasavalta (Pohjois-Korea)" },
{ value: "KR", name: "Korean tasavalta (Etelä-Korea)" },
{ value: "GR", name: "Kreikka" },
{ value: "HR", name: "Kroatia" },
{ value: "CU", name: "Kuuba" },
{ value: "KW", name: "Kuwait" },
{ value: "CY", name: "Kypros" },
{ value: "LA", name: "Laos" },
{ value: "LV", name: "Latvia" },
{ value: "LS", name: "Lesotho" },
{ value: "LB", name: "Libanon" },
{ value: "LR", name: "Liberia" },
{ value: "LY", name: "Libya" },
{ value: "LI", name: "Liechtenstein" },
{ value: "LT", name: "Liettua" },
{ value: "LU", name: "Luxemburg" },
{ value: "EH", name: "Länsi-Sahara" },
{ value: "MO", name: "Macao" },
{ value: "MG", name: "Madagaskar" },
{ value: "MK", name: "Makedonia" },
{ value: "MW", name: "Malawi" },
{ value: "MV", name: "Malediivit" },
{ value: "MY", name: "Malesia" },
{ value: "ML", name: "Mali" },
{ value: "MT", name: "Malta" },
{ value: "IM", name: "Mansaari" },
{ value: "MA", name: "Marokko" },
{ value: "MH", name: "Marshallinsaaret" },
{ value: "MQ", name: "Martinique" },
{ value: "MR", name: "Mauritania" },
{ value: "MU", name: "Mauritius" },
{ value: "YT", name: "Mayotte" },
{ value: "MX", name: "Meksiko" },
{ value: "FM", name: "Mikronesia" },
{ value: "MD", name: "Moldova" },
{ value: "MC", name: "Monaco" },
{ value: "MN", name: "Mongolia" },
{ value: "ME", name: "Montenegro" },
{ value: "MS", name: "Montserrat" },
{ value: "MZ", name: "Mosambik" },
{ value: "MM", name: "Myanmar" },
{ value: "NA", name: "Namibia" },
{ value: "NR", name: "Nauru" },
{ value: "NP", name: "Nepal" },
{ value: "NI", name: "Nicaragua" },
{ value: "NE", name: "Niger" },
{ value: "NG", name: "Nigeria" },
{ value: "NU", name: "Niue" },
{ value: "NF", name: "Norfolkinsaari" },
{ value: "NO", name: "Norja" },
{ value: "CI", name: "Norsunluurannikko" },
{ value: "OM", name: "Oman" },
{ value: "PK", name: "Pakistan" },
{ value: "PW", name: "Palau" },
{ value: "PS", name: "Palestiina" },
{ value: "PA", name: "Panama" },
{ value: "PG", name: "Papua-Uusi-Guinea" },
{ value: "PY", name: "Paraguay" },
{ value: "PE", name: "Peru" },
{ value: "PN", name: "Pitcairn" },
{ value: "MP", name: "Pohjois-Mariaanit" },
{ value: "PT", name: "Portugali" },
{ value: "PR", name: "Puerto Rico" },
{ value: "PL", name: "Puola" },
{ value: "GQ", name: "Päiväntasaajan Guinea" },
{ value: "QA", name: "Qatar" },
{ value: "FR", name: "Ranska" },
{ value: "TF", name: "Ranskan eteläiset alueet" },
{ value: "GF", name: "Ranskan Guayana" },
{ value: "PF", name: "Ranskan Polynesia" },
{ value: "RE", name: "Réunion" },
{ value: "RO", name: "Romania" },
{ value: "RW", name: "Ruanda" },
{ value: "SE", name: "Ruotsi" },
{ value: "BL", name: "Saint Barthélemy" },
{ value: "SH", name: "Saint Helena" },
{ value: "KN", name: "Saint Kitts ja Nevis" },
{ value: "LC", name: "Saint Lucia" },
{ value: "MF", name: "Saint Martin" },
{ value: "PM", name: "Saint-Pierre ja Miquelon" },
{ value: "VC", name: "Saint Vincent ja Grenadiinit" },
{ value: "DE", name: "Saksa" },
{ value: "SB", name: "Salomonsaaret" },
{ value: "ZM", name: "Sambia" },
{ value: "WS", name: "Samoa" },
{ value: "SM", name: "San Marino" },
{ value: "ST", name: "São Tomé ja Príncipe" },
{ value: "SA", name: "Saudi-Arabia" },
{ value: "SN", name: "Senegal" },
{ value: "RS", name: "Serbia" },
{ value: "SC", name: "Seychellit" },
{ value: "SL", name: "Sierra Leone" },
{ value: "SG", name: "Singapore" },
{ value: "SK", name: "Slovakia" },
{ value: "SI", name: "Slovenia" },
{ value: "SO", name: "Somalia" },
{ value: "LK", name: "Sri Lanka" },
{ value: "SD", name: "Sudan" },
{ value: "FI", name: "Suomi" },
{ value: "SR", name: "Suriname" },
{ value: "SJ", name: "Svalbard ja Jan Mayen" },
{ value: "CH", name: "Sveitsi" },
{ value: "SZ", name: "Swazimaa" },
{ value: "SY", name: "Syyria" },
{ value: "TJ", name: "Tadžikistan" },
{ value: "TW", name: "Taiwan" },
{ value: "TZ", name: "Tansania" },
{ value: "DK", name: "Tanska" },
{ value: "TH", name: "Thaimaa" },
{ value: "TG", name: "Togo" },
{ value: "TK", name: "Tokelau" },
{ value: "TO", name: "Tonga" },
{ value: "TT", name: "Trinidad ja Tobago" },
{ value: "TD", name: "Tšad" },
{ value: "CZ", name: "Tšekki" },
{ value: "TN", name: "Tunisia" },
{ value: "TR", name: "Turkki" },
{ value: "TM", name: "Turkmenistan" },
{ value: "TC", name: "Turks- ja Caicossaaret" },
{ value: "TV", name: "Tuvalu" },
{ value: "UG", name: "Uganda" },
{ value: "UA", name: "Ukraina" },
{ value: "HU", name: "Unkari" },
{ value: "UY", name: "Uruguay" },
{ value: "NC", name: "Uusi-Kaledonia" },
{ value: "NZ", name: "Uusi-Seelanti" },
{ value: "UZ", name: "Uzbekistan" },
{ value: "BY", name: "Valko-Venäjä" },
{ value: "VU", name: "Vanuatu" },
{ value: "VA", name: "Vatikaani" },
{ value: "VE", name: "Venezuela" },
{ value: "RU", name: "Venäjä" },
{ value: "VN", name: "Vietnam" },
{ value: "EE", name: "Viro" },
{ value: "WF", name: "Wallis ja Futuna" },
{ value: "US", name: "Yhdysvallat (USA)" },
{ value: "VI", name: "Yhdysvaltain Neitsytsaaret" },
{ value: "UM", name: "Yhdysvaltain pienet erillissaaret" },
{ value: "ZW", name: "Zimbabwe" },
];
const CountrySelector = () => {
return (
<ComboboxV2
helpText="Kirjoita ja valitse maa"
inputWidth={(children) => (
<Column md={8} lg={6}>
{children}
</Column>
)}
labelText="Valitse maa"
onBlur={(event) => console.log("onBlur", event.target.value)}
onChange={(value) => console.log("onChange", value)}
onEnter={(event) => console.log("onEnter", event.target.value)}
onSelect={(value) => console.log("onSelect", value)}
required
startsWith
threshold={1}
type="text"
>
<ComboboxV2Menu>
{countries.map(({ value, name }) => (
<ComboboxV2MenuOption className="kds-flex" key={value} value={value} label={name} />
))}
</ComboboxV2Menu>
</ComboboxV2>
);
};
render(<CountrySelector />); Tekstikentän ja valikon yhdistelmä
Käytä tekstikentän ja valikon yhdistelmää, jos käyttäjällä voi olla tarve etsiä sopivaa vaihtoehtoa tietystä joukosta
käyttäen automaattista täydennystä tai valitsemalla se valikosta. Älä tarjoa avattavaa valikkoa, jos valittavia vaihtoehtoja
on niin paljon, että niiden selaaminen on todella hankalaa.
<ComboboxV2
dropdown
helpText="Kirjoita ja valitse etuus"
inputWidth={(children) => (
<Column md={8} lg={6}>
{children}
</Column>
)}
labelText="Etuus"
onBlur={(event) => console.log("onBlur", event.target.value)}
onChange={(value) => console.log("onChange", value)}
onEnter={(event) => console.log("onEnter", event.target.value)}
onSelect={(value) => console.log("onSelect", value)}
threshold={1}
>
<ComboboxV2Menu>
{[
{ value: "16 vuotta täyttäneen vammaistuki" },
{ value: "Adoptiotuki" },
{ value: "Elatustuki" },
{ value: "Eläkettä saavan hoitotuki" },
{ value: "Erityishoitoraha" },
{ value: "Isäkuukauden siirtämisestä ilmoittaminen" },
{ value: "Kuntoutusraha" },
{ value: "Lapsilisä" },
{ value: "Lastenhoidon tuet" },
{ value: "Matkakorvaus" },
{ value: "Opintotuki" },
{ value: "Opintotuen tulovalvonnan uudelleenkäsittelypyyntö" },
{ value: "Osasairauspäiväraha" },
{ value: "Peruspäiväraha" },
{ value: "Sairauspäiväraha" },
{ value: "Sotilasavustus" },
{ value: "Työmarkkinatuki" },
{ value: "Työttömyysajan ilmoitus" },
{ value: "Yleinen asumistuki" },
{ value: "Vanhempainpäivärahat" },
{ value: "Äitiysavustus" },
].map(({ value }) => (
<ComboboxV2MenuOption key={value} value={value} />
))}
</ComboboxV2Menu>
</ComboboxV2> Salli vain valikossa olevat arvot
Komponentin saa toimimaan Select-komponentin kaltaisesti propilla allowOnlyListedValues, joka sallii kenttään vain ne arvot, jotka löytyvät
komponentille annetuista vaihtoehdoista (ComboboxV2MenuOption).
<ComboboxV2
allowOnlyListedValues
dropdown
helpText="Kirjoita ja valitse etuus"
inputWidth={(children) => (
<Column md={8} lg={6}>
{children}
</Column>
)}
labelText="Etuus"
onBlur={(event) => console.log("onBlur", event.target.value)}
onChange={(value) => console.log("onChange", value)}
onEnter={(event) => console.log("onEnter", event.target.value)}
onSelect={(value) => console.log("onSelect", value)}
threshold={1}
>
<ComboboxV2Menu>
{[
{ value: "16 vuotta täyttäneen vammaistuki" },
{ value: "Adoptiotuki" },
{ value: "Elatustuki" },
{ value: "Eläkettä saavan hoitotuki" },
{ value: "Erityishoitoraha" },
{ value: "Isäkuukauden siirtämisestä ilmoittaminen" },
{ value: "Kuntoutusraha" },
{ value: "Lapsilisä" },
{ value: "Lastenhoidon tuet" },
{ value: "Matkakorvaus" },
{ value: "Opintotuki" },
{ value: "Opintotuen tulovalvonnan uudelleenkäsittelypyyntö" },
{ value: "Osasairauspäiväraha" },
{ value: "Peruspäiväraha" },
{ value: "Sairauspäiväraha" },
{ value: "Sotilasavustus" },
{ value: "Työmarkkinatuki" },
{ value: "Työttömyysajan ilmoitus" },
{ value: "Yleinen asumistuki" },
{ value: "Vanhempainpäivärahat" },
{ value: "Äitiysavustus" },
].map(({ value }) => (
<ComboboxV2MenuOption key={value} value={value} />
))}
</ComboboxV2Menu>
</ComboboxV2> Valikon muokkaus
Valintalistan sisältöä ja ulkoasua voi muokata käyttämällä ComboboxV2MenuOption-komponentin render-propia. Voit esimerkiksi lisätä
vaihtoehtoihin liittyviä lisätietoja, jos se auttaa käyttäjää löytämään tai valitsemaan vaihtoehdon.
Huomaa, että kenttä ei suodata valintoja esitettyjen lisätietojen perusteella. Mahdolliset lisätiedot tulee erottaa visuaalisesti
varsinaisista valinnoista.
<ComboboxV2
labelText="Valitse uusittava resepti"
dropdown
threshold={1}
inputWidth={(children) => (
<Column md={8} lg={6}>
{children}
</Column>
)}
>
<ComboboxV2Menu>
{[
{ title: "Ibuprofeeni", status: "danger", statusMsg: "Loppu" },
{ title: "Nenäsuihke", status: "success", statusMsg: "Jäljellä" },
{ title: "Antihistamiini", status: "success", statusMsg: "Jäljellä" },
{ title: "Parasetamoli", status: "danger", statusMsg: "Loppu" },
].map(({ title, status, statusMsg }) => (
<ComboboxV2MenuOption
key={title}
value={title}
render={(value) => (
<div className="kds-flex kds-flex-row kds-items-center kds-justify-between">
<div>{value}</div>
<Badge variant={status}>{statusMsg}</Badge>
</div>
)}
/>
))}
</ComboboxV2Menu>
</ComboboxV2> Virheilmoitus
<ComboboxV2
dropdown
errorText="Valitse vastaus."
helpText="Kirjoita ja valitse etuus"
inputWidth={(children) => (
<Column md={8} lg={6}>
{children}
</Column>
)}
invalid
labelText="Etuus"
required
>
<ComboboxV2Menu>
<ComboboxV2MenuOption value="Lapsilisä" />
<ComboboxV2MenuOption value="Lasten hoidon tuet" />
</ComboboxV2Menu>
</ComboboxV2> Estetty
<ComboboxV2
disabled
dropdown
helpText="Kirjoita ja valitse etuus"
inputWidth={(children) => (
<Column md={8} lg={6}>
{children}
</Column>
)}
labelText="Etuus"
/> Lukutila
<ComboboxV2
dropdown
helpText="Kirjoita ja valitse etuus"
inputWidth={(children) => (
<Column md={8} lg={6}>
{children}
</Column>
)}
labelText="Etuus"
readOnly
value="Lapsilisä"
/> Oletusvalinta
Oletusvalinta voidaan antaa merkkijonona tai ComboboxV2OptionValue-tyyppisenä objektina. Anna oletusvalinta value-propin kautta silloin, kun komponenttia käytetään kontrolloituna komponenttina.
<ComboboxV2
allowOnlyListedValues
defaultValue="Eläkettä saavan hoitotuki"
dropdown
helpText="Kirjoita ja valitse etuus"
inputWidth={(children) => (
<Column md={8} lg={6}>
{children}
</Column>
)}
labelText="Etuus"
threshold={1}
>
<ComboboxV2Menu>
{[
{ value: "16 vuotta täyttäneen vammaistuki" },
{ value: "Adoptiotuki" },
{ value: "Elatustuki" },
{ value: "Eläkettä saavan hoitotuki" },
{ value: "Erityishoitoraha" },
{ value: "Isäkuukauden siirtämisestä ilmoittaminen" },
{ value: "Kuntoutusraha" },
{ value: "Lapsilisä" },
{ value: "Lastenhoidon tuet" },
{ value: "Matkakorvaus" },
{ value: "Opintotuki" },
{ value: "Opintotuen tulovalvonnan uudelleenkäsittelypyyntö" },
{ value: "Osasairauspäiväraha" },
{ value: "Peruspäiväraha" },
{ value: "Sairauspäiväraha" },
{ value: "Sotilasavustus" },
{ value: "Työmarkkinatuki" },
{ value: "Työttömyysajan ilmoitus" },
{ value: "Yleinen asumistuki" },
{ value: "Vanhempainpäivärahat" },
{ value: "Äitiysavustus" },
].map(({ value }) => (
<ComboboxV2MenuOption key={value} value={value} />
))}
</ComboboxV2Menu>
</ComboboxV2> Kokovaihtoehdot
Pienin koko (xs) on tarkoitettu tiivistä asettelua vaativiin asiantuntijakäyttöliittymiin.
<>
<ComboboxV2
labelText="ComboboxV2 xs-koossa"
helpText="Kirjoita ja valitse etuus"
size="xs"
inputWidth={(children) => (
<Column md={8} lg={6}>
{children}
</Column>
)}
dropdown
>
<ComboboxV2Menu>
{[
{ value: "Adoptiotuki" },
{ value: "Elatustuki" },
{ value: "Erityishoitoraha" },
{ value: "Kuntoutusraha" },
{ value: "Lapsilisä" },
{ value: "Lastenhoidon tuet" },
{ value: "Matkakorvaus" },
{ value: "Opintotuki" },
{ value: "Osasairauspäiväraha" },
{ value: "Peruspäiväraha" },
{ value: "Sairauspäiväraha" },
{ value: "Sotilasavustus" },
{ value: "Työmarkkinatuki" },
{ value: "Yleinen asumistuki" },
{ value: "Vanhempainpäivärahat" },
{ value: "Äitiysavustus" },
].map(({ value }) => (
<ComboboxV2MenuOption key={value} value={value} />
))}
</ComboboxV2Menu>
</ComboboxV2>
<ComboboxV2
labelText="ComboboxV2 sm-koossa"
helpText="Kirjoita ja valitse etuus"
size="sm"
inputWidth={(children) => (
<Column md={8} lg={6}>
{children}
</Column>
)}
dropdown
>
<ComboboxV2Menu>
{[
{ value: "Adoptiotuki" },
{ value: "Elatustuki" },
{ value: "Erityishoitoraha" },
{ value: "Kuntoutusraha" },
{ value: "Lapsilisä" },
{ value: "Lastenhoidon tuet" },
{ value: "Matkakorvaus" },
{ value: "Opintotuki" },
{ value: "Osasairauspäiväraha" },
{ value: "Peruspäiväraha" },
{ value: "Sairauspäiväraha" },
{ value: "Sotilasavustus" },
{ value: "Työmarkkinatuki" },
{ value: "Yleinen asumistuki" },
{ value: "Vanhempainpäivärahat" },
{ value: "Äitiysavustus" },
].map(({ value }) => (
<ComboboxV2MenuOption key={value} value={value} />
))}
</ComboboxV2Menu>
</ComboboxV2>
<ComboboxV2
labelText="ComboboxV2 md-koossa (oletus)"
helpText="Kirjoita ja valitse etuus"
inputWidth={(children) => (
<Column md={8} lg={6}>
{children}
</Column>
)}
dropdown
>
<ComboboxV2Menu>
{[
{ value: "Adoptiotuki" },
{ value: "Elatustuki" },
{ value: "Erityishoitoraha" },
{ value: "Kuntoutusraha" },
{ value: "Lapsilisä" },
{ value: "Lastenhoidon tuet" },
{ value: "Matkakorvaus" },
{ value: "Opintotuki" },
{ value: "Osasairauspäiväraha" },
{ value: "Peruspäiväraha" },
{ value: "Sairauspäiväraha" },
{ value: "Sotilasavustus" },
{ value: "Työmarkkinatuki" },
{ value: "Yleinen asumistuki" },
{ value: "Vanhempainpäivärahat" },
{ value: "Äitiysavustus" },
].map(({ value }) => (
<ComboboxV2MenuOption key={value} value={value} />
))}
</ComboboxV2Menu>
</ComboboxV2>
</> Valikon renderöinti Portalin avulla
Valikko voidaan renderöidä Portal-komponentilla 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">
<ComboboxV2 dropdown helpText="Kirjoita ja valitse kaupunki" labelText="Kaupunki" threshold={1} usePortal>
<ComboboxV2Menu>
{[
{ value: "Helsinki" },
{ value: "Espoo" },
{ value: "Kerava" },
{ value: "Kuopio" },
{ value: "Turku" },
{ value: "Tampere" },
{ value: "Oulu" },
{ value: "Rovaniemi" },
{ value: "Vaasa" },
{ value: "Vantaa" },
].map(({ value }) => (
<ComboboxV2MenuOption key={value} value={value} />
))}
</ComboboxV2Menu>
</ComboboxV2>
</ChatMessage>
</Chat> Tarvittaessa addonBefore ja addonAfter -propeilla voi yhdistää lisätietoja tai painikkeita komponentin input-kenttään.
() => {
const [isLoading, setIsLoading] = useState(false);
const handleClick = () => {
if (isLoading) {
return;
}
setIsLoading(true);
setTimeout(() => {
setIsLoading(false);
}, 2000);
};
return (
<ComboboxV2
addonAfter={
<Button onClick={handleClick} iconBefore={isLoading ? <Spinner srLoadingText="Haetaan..." /> : undefined}>
Hae
</Button>
}
disabled={isLoading}
dropdown
helpText="Kirjoita ja valitse etuus"
inputWidth={(children) => (
<Column md={8} lg={6}>
{children}
</Column>
)}
labelText="Hae etuuden nimellä"
threshold={1}
>
<ComboboxV2Menu>
{[
{ value: "16 vuotta täyttäneen vammaistuki" },
{ value: "Adoptiotuki" },
{ value: "Elatustuki" },
{ value: "Eläkettä saavan hoitotuki" },
{ value: "Erityishoitoraha" },
{ value: "Isäkuukauden siirtämisestä ilmoittaminen" },
{ value: "Kuntoutusraha" },
{ value: "Lapsilisä" },
{ value: "Lastenhoidon tuet" },
{ value: "Matkakorvaus" },
{ value: "Opintotuki" },
{ value: "Opintotuen tulovalvonnan uudelleenkäsittelypyyntö" },
{ value: "Osasairauspäiväraha" },
{ value: "Peruspäiväraha" },
{ value: "Sairauspäiväraha" },
{ value: "Sotilasavustus" },
{ value: "Työmarkkinatuki" },
{ value: "Työttömyysajan ilmoitus" },
{ value: "Yleinen asumistuki" },
{ value: "Vanhempainpäivärahat" },
{ value: "Äitiysavustus" },
].map(({ value }) => (
<ComboboxV2MenuOption key={value} value={value} />
))}
</ComboboxV2Menu>
</ComboboxV2>
);
}; <ComboboxV2
addonBefore={<InputText addon>Lorem ipsum</InputText>}
helpText="Kirjoita ja valitse etuus"
inputWidth={(children) => (
<Column md={8} lg={6}>
{children}
</Column>
)}
labelText="Etuus"
threshold={1}
>
<ComboboxV2Menu>
{[
{ value: "16 vuotta täyttäneen vammaistuki" },
{ value: "Adoptiotuki" },
{ value: "Elatustuki" },
{ value: "Eläkettä saavan hoitotuki" },
{ value: "Erityishoitoraha" },
{ value: "Isäkuukauden siirtämisestä ilmoittaminen" },
{ value: "Kuntoutusraha" },
{ value: "Lapsilisä" },
{ value: "Lastenhoidon tuet" },
{ value: "Matkakorvaus" },
{ value: "Opintotuki" },
{ value: "Opintotuen tulovalvonnan uudelleenkäsittelypyyntö" },
{ value: "Osasairauspäiväraha" },
{ value: "Peruspäiväraha" },
{ value: "Sairauspäiväraha" },
{ value: "Sotilasavustus" },
{ value: "Työmarkkinatuki" },
{ value: "Työttömyysajan ilmoitus" },
{ value: "Yleinen asumistuki" },
{ value: "Vanhempainpäivärahat" },
{ value: "Äitiysavustus" },
].map(({ value }) => (
<ComboboxV2MenuOption key={value} value={value} />
))}
</ComboboxV2Menu>
</ComboboxV2> Arvojen päivittäminen komponentin ulkopuolelta
const BenefitSelector = () => {
const ref = React.useRef();
const [value, setValue] = useState("");
return (
<>
<ComboboxV2
allowOnlyListedValues
dropdown
helpText="Kirjoita ja valitse etuus"
inputWidth={(children) => (
<Column md={8} lg={6}>
{children}
</Column>
)}
labelText="Etuus"
onBlur={(event) => console.log("onBlur", event.target.value)}
onChange={(value) => {
console.log("onChange", value);
setValue(value);
}}
onEnter={(event) => console.log("onEnter", event.target.value)}
onSelect={(value) => console.log("onSelect", value)}
ref={ref}
threshold={1}
value={value}
>
<ComboboxV2Menu>
{[
{ value: "16 vuotta täyttäneen vammaistuki" },
{ value: "Adoptiotuki" },
{ value: "Elatustuki" },
{ value: "Eläkettä saavan hoitotuki" },
{ value: "Erityishoitoraha" },
{ value: "Isäkuukauden siirtämisestä ilmoittaminen" },
{ value: "Kuntoutusraha" },
{ value: "Lapsilisä" },
{ value: "Lastenhoidon tuet" },
{ value: "Matkakorvaus" },
{ value: "Opintotuki" },
{ value: "Opintotuen tulovalvonnan uudelleenkäsittelypyyntö" },
{ value: "Osasairauspäiväraha" },
{ value: "Peruspäiväraha" },
{ value: "Sairauspäiväraha" },
{ value: "Sotilasavustus" },
{ value: "Työmarkkinatuki" },
{ value: "Työttömyysajan ilmoitus" },
{ value: "Yleinen asumistuki" },
{ value: "Vanhempainpäivärahat" },
{ value: "Äitiysavustus" },
].map(({ value }) => (
<ComboboxV2MenuOption key={value} value={value} />
))}
</ComboboxV2Menu>
</ComboboxV2>
<ButtonGroup horizontal>
<Button onClick={() => setValue("Työmarkkinatuki")}>Aseta arvo</Button>
<Button onClick={() => setValue("")} appearance="outline">
Tyhjennä
</Button>
<Button onClick={() => ref.current.focus()} appearance="outline">
Kohdista kenttään
</Button>
</ButtonGroup>
</>
);
};
render(<BenefitSelector />); Muu-vaihtoehto
Muu-vaihtoehtoa voi käyttää, kun halutaan tarjota valintavaihtoehto silloin kun muita vaihtoehtoja ei löydy.
Muu-vaihtoehto voi myös olla näkyvissä jatkuvasti ja se on myös osa suodatusvaihtoehtoja.
const BenefitSelector = () => (
<ComboboxV2
dropdown
helpText="Kirjoita ja valitse etuus"
inputWidth={(children) => (
<Column md={8} lg={6}>
{children}
</Column>
)}
labelText="Muu-vaihtoehto aina näkyvissä"
onSelect={(value) => console.log("onSelect", value)}
showOtherOptionAlways
threshold={1}
>
<ComboboxV2Menu>
{[
{ value: "16 vuotta täyttäneen vammaistuki" },
{ value: "Adoptiotuki" },
{ value: "Elatustuki" },
{ value: "Eläkettä saavan hoitotuki" },
{ value: "Erityishoitoraha" },
{ value: "Isäkuukauden siirtämisestä ilmoittaminen" },
{ value: "Kuntoutusraha" },
{ value: "Lapsilisä" },
{ value: "Lastenhoidon tuet" },
{ value: "Matkakorvaus" },
{ value: "Opintotuki" },
{ value: "Opintotuen tulovalvonnan uudelleenkäsittelypyyntö" },
{ value: "Osasairauspäiväraha" },
{ value: "Peruspäiväraha" },
{ value: "Sairauspäiväraha" },
{ value: "Sotilasavustus" },
{ value: "Työmarkkinatuki" },
{ value: "Työttömyysajan ilmoitus" },
{ value: "Yleinen asumistuki" },
{ value: "Vanhempainpäivärahat" },
{ value: "Äitiysavustus" },
].map(({ value }) => (
<ComboboxV2MenuOption key={value} value={value} />
))}
<ComboboxV2MenuOption isOtherOption value="Muu etuus" />
</ComboboxV2Menu>
</ComboboxV2>
);
const BenefitSelectorCustom = () => (
<ComboboxV2
helpText="Kirjoita ja valitse etuus"
inputWidth={(children) => (
<Column md={8} lg={6}>
{children}
</Column>
)}
labelText="Muu-vaihtoehto näkyvissä vain kun tuloksia ei löydy"
onSelect={(value) => console.log("onSelect", value)}
threshold={1}
>
<ComboboxV2Menu>
{[
{ value: "16 vuotta täyttäneen vammaistuki" },
{ value: "Adoptiotuki" },
{ value: "Elatustuki" },
{ value: "Eläkettä saavan hoitotuki" },
{ value: "Erityishoitoraha" },
{ value: "Isäkuukauden siirtämisestä ilmoittaminen" },
{ value: "Kuntoutusraha" },
{ value: "Lapsilisä" },
{ value: "Lastenhoidon tuet" },
{ value: "Matkakorvaus" },
{ value: "Opintotuki" },
{ value: "Opintotuen tulovalvonnan uudelleenkäsittelypyyntö" },
{ value: "Osasairauspäiväraha" },
{ value: "Peruspäiväraha" },
{ value: "Sairauspäiväraha" },
{ value: "Sotilasavustus" },
{ value: "Työmarkkinatuki" },
{ value: "Työttömyysajan ilmoitus" },
{ value: "Yleinen asumistuki" },
{ value: "Vanhempainpäivärahat" },
{ value: "Äitiysavustus" },
].map(({ value }) => (
<ComboboxV2MenuOption key={value} value={value} />
))}
<ComboboxV2MenuOption
isOtherOption
value="Muu etuus"
render={(value) => (
<span>
<strong>Etuutta ei löytynyt</strong>
<br />
<span>{value}</span>
</span>
)}
/>
</ComboboxV2Menu>
</ComboboxV2>
);
render(
<>
<BenefitSelector />
<BenefitSelectorCustom />
</>
); Valintojen hakeminen asynkronisesti
Valinnat voi noutaa asynkronisesti, kun komponentti renderöidään. Käytä ComboboxV2Async-komponenttia, jos valintoja on tarve täydentää input-kentän syötteen perusteella.
const loadOptions = (): Promise<ComboboxV2OptionValue[]> => {
return new Promise((resolve) => {
setTimeout(() => {
resolve([
{ value: "16 vuotta täyttäneen vammaistuki" },
{ value: "Adoptiotuki" },
{ value: "Elatustuki" },
{ value: "Eläkettä saavan hoitotuki" },
{ value: "Erityishoitoraha" },
{ value: "Isäkuukauden siirtämisestä ilmoittaminen" },
{ value: "Kuntoutusraha" },
{ value: "Lapsilisä" },
{ value: "Lastenhoidon tuet" },
{ value: "Matkakorvaus" },
{ value: "Opintotuki" },
{ value: "Opintotuen tulovalvonnan uudelleenkäsittelypyyntö" },
{ value: "Osasairauspäiväraha" },
{ value: "Peruspäiväraha" },
{ value: "Sairauspäiväraha" },
{ value: "Sotilasavustus" },
{ value: "Työmarkkinatuki" },
{ value: "Työttömyysajan ilmoitus" },
{ value: "Yleinen asumistuki" },
{ value: "Vanhempainpäivärahat" },
{ value: "Äitiysavustus" },
]);
}, 1000);
});
}
function AsyncInitialLoadExample() {
const [options, setOptions] = useState<ComboboxV2OptionValue[]>([]);
useEffect(() => {
const getOptions = async () => {
setOptions(await loadOptions());
};
getOptions();
}, []);
return (
<ComboboxV2
defaultValue={options[2]}
dropdown
disabled={!options.length}
helpText="Kirjoita ja valitse etuus"
inputWidth={(children) => (
<Column md={8} lg={6}>
{children}
</Column>
)}
labelText="Etuus"
onBlur={(event) => console.log("onBlur", event.target.value)}
onChange={(value) => console.log("onChange", value)}
onEnter={(event) => console.log("onEnter", event.target.value)}
onSelect={(value) => console.log("onSelect", value)}
placeholder={options.length ? undefined : "Haetaan vaihtoehtoja"}
>
<ComboboxV2Menu>
{options.map(({ value }) => (
<ComboboxV2MenuOption key={value} value={value} />
))}
</ComboboxV2Menu>
</ComboboxV2>
);
}
render(<AsyncInitialLoadExample />); Valintojen täydentäminen käyttäjän syötteen perusteella
Voit käyttää ComboboxV2Async-komponentin loadOptions-proppia valintavaihtoehtojen hakemiseen ja suodattamiseen asynkronisesti,
kun käyttäjä kirjoittaa input-kenttään. Tämä on suositeltavaa silloin kun valintavaihtoehtoja on erittäin paljon.
Kannattaa muodostaa loadOptions-funktio komponentin ulkopuolella tai kääriä se useCallback (Avautuu uuteen välilehteen)
Valintavaihtoehtojen suodatus tehdään loadOptions-funktiossa. Funktion options-parametri palauttaa threshold- ja startsWith-arvot.
Oletusvalinnat voi antaa tavallisen Comboboxin tapaan lapsielementteinä. Jos oletusvalintoja ei ole annettu, haetaan ne loadOptions-funktiolla.
Esimerkki valintoja ehdottavasta syöttökentästä
const searchSuggestions = [
{ value: "16 vuotta täyttäneen vammaistuki" },
{ value: "Adoptiotuki" },
{ value: "Elatustuki" },
{ value: "Eläkettä saavan hoitotuki" },
{ value: "Erityishoitoraha" },
{ value: "Isäkuukauden siirtämisestä ilmoittaminen" },
{ value: "Kela-kortti" },
{ value: "Kela-taksi" },
{ value: "Kuntoutusraha" },
{ value: "Lapsilisä" },
{ value: "Lastenhoidon tuet" },
{ value: "Matkakorvaus" },
{ value: "Opintotuki" },
{ value: "Opintotuen tulovalvonnan uudelleenkäsittelypyyntö" },
{ value: "Osasairauspäiväraha" },
{ value: "Peruspäiväraha" },
{ value: "Sairauspäiväraha" },
{ value: "Sotilasavustus" },
{ value: "Työmarkkinatuki" },
{ value: "Työttömyysajan ilmoitus" },
{ value: "Yleinen asumistuki" },
{ value: "Vanhempainpäivärahat" },
{ value: "Äitiysavustus" },
];
const loadOptions = async (
inputValue: string,
{ threshold }: ComboboxV2LoadOptions
): Promise<ComboboxV2LoadOptionsResult> => {
if (inputValue.length < threshold) {
return;
}
const filterOptions = (inputValue: string): ComboboxV2OptionValue[] =>
searchSuggestions.filter(({ value }) => value.toLowerCase().startsWith(inputValue.toLowerCase()));
return {
loadedOptions: new Promise((resolve) => {
setTimeout(() => {
resolve(filterOptions(inputValue));
}, 500);
}),
showNoResults: inputValue !== "",
showOtherOption: inputValue !== "",
};
};
function AsyncAutoCompleteExample() {
const [value, setValue] = useState("");
const [isLoading, setIsLoading] = useState(false);
const handleClick = () => {
if (isLoading) {
return;
}
setIsLoading(true);
setTimeout(() => {
setIsLoading(false);
}, 2000);
};
return (
<ComboboxV2Async
addonAfter={
<Button onClick={handleClick} iconBefore={isLoading ? <Spinner srLoadingText="Haetaan..." /> : undefined}>
Hae
</Button>
}
asyncOptions={{ loadResultsDelay: 500 }}
helpText="Kirjoita tai valitse hakusana"
inputWidth={(children) => <Column md={8}>{children}</Column>}
labelText="Hae"
loadingText="Ladataan hakusanoja..."
loadOptions={loadOptions}
noResultsText="Hakusanoja ei löytynyt"
onBlur={(event) => console.log("onBlur", event.target.value)}
onChange={(value) => {
console.log("onChange", value);
setValue(value);
}}
onEnter={(event) => console.log("onEnter", event.target.value)}
onSelect={(value) => console.log("onSelect", value)}
startsWith={true}
threshold={1}
value={value}
>
<ComboboxV2Menu />
</ComboboxV2Async>
);
}
render(<AsyncAutoCompleteExample />); Valintojen hakeminen valikon avautuessa
Oletuksena valikossa näytetään edelliset hakutulokset. Asetuksella loadOptionsOnToggle voidaan valinnat hakea loadOptions-funktiolla,
joka mahdollistaa räätälöidyt vaihtoehdot, kun valikko avataan.
const benefits = [
{ value: "16 vuotta täyttäneen vammaistuki" },
{ value: "Adoptiotuki" },
{ value: "Elatustuki" },
{ value: "Eläkettä saavan hoitotuki" },
{ value: "Erityishoitoraha" },
{ value: "Isäkuukauden siirtämisestä ilmoittaminen" },
{ value: "Kuntoutusraha" },
{ value: "Lapsilisä" },
{ value: "Lastenhoidon tuet" },
{ value: "Matkakorvaus" },
{ value: "Opintotuki" },
{ value: "Opintotuen tulovalvonnan uudelleenkäsittelypyyntö" },
{ value: "Osasairauspäiväraha" },
{ value: "Peruspäiväraha" },
{ value: "Sairauspäiväraha" },
{ value: "Sotilasavustus" },
{ value: "Työmarkkinatuki" },
{ value: "Työttömyysajan ilmoitus" },
{ value: "Yleinen asumistuki" },
{ value: "Vanhempainpäivärahat" },
{ value: "Äitiysavustus" },
];
const loadOptions = async (
inputValue: string,
{ trigger, threshold }: ComboboxV2LoadOptions
): Promise<ComboboxV2LoadOptionsResult> => {
if (trigger.type === ComboboxV2LoadOptionsTriggerType.Change && inputValue.length < threshold) {
return;
}
if (trigger.type === ComboboxV2LoadOptionsTriggerType.Toggle) {
return new Promise((resolve) => {
setTimeout(() => resolve(benefits), 500);
});
}
const filterOptions = (inputValue: string) =>
benefits.filter((el) => el.value.toLowerCase().includes(inputValue.toLowerCase()));
return new Promise((resolve) => {
setTimeout(() => resolve(filterOptions(inputValue)), 1000);
});
};
function AsyncAutoCompleteExample() {
return (
<ComboboxV2Async
allowOnlyListedValues
defaultValue={benefits[4]}
asyncOptions={{
loadResultsDelay: 500,
loadOptionsOnToggle: true,
}}
dropdown
helpText="Kirjoita ja valitse etuus"
inputWidth={(children) => (
<Column md={8} lg={6}>
{children}
</Column>
)}
labelText="Etuus"
loadingText="Ladataan..."
loadOptions={loadOptions}
noResultsText="Ei tuloksia"
startsWith={false}
threshold={1}
>
<ComboboxV2Menu />
</ComboboxV2Async>
);
}
render(<AsyncAutoCompleteExample />); Muu-vaihtoehto
Muu-vaihtoehtoa käytettäessä ei tuloksia -ilmoitusta ei näytetä.
const benefits = [
{ value: "16 vuotta täyttäneen vammaistuki" },
{ value: "Adoptiotuki" },
{ value: "Elatustuki" },
{ value: "Eläkettä saavan hoitotuki" },
{ value: "Erityishoitoraha" },
{ value: "Isäkuukauden siirtämisestä ilmoittaminen" },
{ value: "Kuntoutusraha" },
{ value: "Lapsilisä" },
{ value: "Lastenhoidon tuet" },
{ value: "Matkakorvaus" },
{ value: "Opintotuki" },
{ value: "Opintotuen tulovalvonnan uudelleenkäsittelypyyntö" },
{ value: "Osasairauspäiväraha" },
{ value: "Peruspäiväraha" },
{ value: "Sairauspäiväraha" },
{ value: "Sotilasavustus" },
{ value: "Työmarkkinatuki" },
{ value: "Työttömyysajan ilmoitus" },
{ value: "Yleinen asumistuki" },
{ value: "Vanhempainpäivärahat" },
{ value: "Äitiysavustus" },
];
const loadOptions = async (
inputValue: string,
{ threshold }: ComboboxV2LoadOptions
): Promise<ComboboxV2LoadOptionsResult> => {
if (inputValue.length < threshold) {
return;
}
const filterOptions = (inputValue: string) =>
benefits.filter((el) => el.value.toLowerCase().includes(inputValue.toLowerCase()));
return new Promise((resolve) => {
setTimeout(() => resolve(filterOptions(inputValue)), 1000);
});
};
function AsyncAutoCompleteExample() {
return (
<>
<ComboboxV2Async
allowOnlyListedValues
dropdown
helpText="Kirjoita ja valitse etuus"
inputWidth={(children) => (
<Column md={8} lg={6}>
{children}
</Column>
)}
labelText="Muu-vaihtoehto aina näkyvissä"
loadingText="Ladataan..."
loadOptions={loadOptions}
showOtherOptionAlways
startsWith={false}
threshold={1}
>
<ComboboxV2Menu>
{benefits.map(({ value }) => (
<ComboboxV2MenuOption key={value} value={value} />
))}
<ComboboxV2MenuOption value="Muu vaihtoehto" isOtherOption />
</ComboboxV2Menu>
</ComboboxV2Async>
<ComboboxV2Async
allowOnlyListedValues
helpText="Kirjoita ja valitse etuus"
inputWidth={(children) => (
<Column md={8} lg={6}>
{children}
</Column>
)}
labelText="Muu-vaihtoehto näkyvissä vain kun tuloksia ei löydy"
loadingText="Ladataan..."
loadOptions={loadOptions}
startsWith={false}
threshold={1}
>
<ComboboxV2Menu>
{benefits.map(({ value }) => (
<ComboboxV2MenuOption key={value} value={value} />
))}
<ComboboxV2MenuOption value="Muu vaihtoehto" isOtherOption />
</ComboboxV2Menu>
</ComboboxV2Async>
</>
);
}
render(<AsyncAutoCompleteExample />);