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 asiakkaalle listasta löytyviä vaihtoehtoja sen
perustella, mitä asiakas tekstikenttään kirjoittaa. Automaattinen täydennys ehdottaa sopivia vaihtoehtoja
reaaliaikaisesti samalla, kun asiakas 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 asiakas 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 asiakas tietää selkeästi, minkä vaihtoehdon hän haluaa valita (esimerkiksi luettelo valtioista tai diagnooseista). Käytä komponenttia, kun haluat ehdottaa asiakkaalle sopivia vaihtoehtoja isosta joukosta (esim. hakukenttä). Ohjeista tarvittaessa asiakasta 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.
Enter Jos valikko on piilossa, ei tee mitään. Esc Jos valikko on auki, ja sulkee valikon. Tab Jos valikko on auki, sulkee valikon kohdistuksen poistuessa komponentista. ↓ Jos valikko on auki, korostaa seuraavan valinnan (focus trap). ↑ Jos valikko on auki, korostaa edellisen valinnan (focus trap).
Komponentille voidaan asettaa seuraavat arvot ruudunlukijaa varten:
resultsNotFoundTeksti, joka luetaan kun valintavaihtoehtoja ei löydy. Valintavaihtoehtoja ei löytynyt resultsFoundTeksti, joka luetaan kun valintavaihtoehtoja löytyy. Funktio, jolla count-parametri. Valintavaihtoehtoja löytyi 1 kappale resultsDelayAfterTypeAika millisekunteina, jonka jälkeen valintojen lukumäärä ilmoitetaan. 2000 resultsEnabledMäärittää luetaanko valintojen lukumäärä. true selectedLabelTeksti, joka lisätään valinnan nimen eteen, kun vaihtoehto valitaan valikosta. Valittu nothingIsSelectedLabelTeksti, joka luetaan kun valinta poistetaan. Valinta poistettu loadingTextTeksti, joka luetaan valikkoa avatessa, kun asynkroninen Combobox hakee vaihtoehtoja. Ladataan valintavaihtoehtoja
() => {
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",
}}
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
asiakkaan työtä tarjoamalla sopivia ehdotuksia (esim. hakukenttä). Käytä komponenttia kuten
mitä tahansa tekstikenttää. Asiakas 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 asiakkaalla 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).
Syötettä vastaavia ehdotuksia 0 kpl Kentän sisältö tyhjennetään, kun kohdistus poistuu kentästä. OnSelect palauttaa tyhjän arvon. Syötettä vastaavia ehdotuksia 1 kpl Ehdotettu arvo valitaan, kun kohdistus poistuu kentästä. OnSelect palauttaa valitun arvon. Syötettä vastaavia ehdotuksia > 1 kpl Kentän sisältö tyhjennetään, kun kohdistus poistuu kentästä. OnSelect palauttaa tyhjän arvon.
<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 asiakasta 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="Pakollinen tieto puuttuu. Valitse etuus."
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> 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..." />}>
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>
<span className="kds-text-muted">Etuutta ei löytynyt</span>
<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 asiakas 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)
Oletusvalinnat voi antaa tavallisen Comboboxin tapaan lapsielementteinä. Jos oletusvalintoja ei ole annettu, haetaan ne loadOptions-funktiolla.
Aseta startsWith ja threshold -propit samalla tavalla kuin suodatusfunktiolle, jotta hakutulokset korostetaan oikein.
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 = (inputValue: string): Promise<ComboboxV2OptionValue[]> => {
const filterOptions = (inputValue: string): ComboboxV2OptionValue[] =>
searchSuggestions.filter(({ value }) => value.toLowerCase().startsWith(inputValue.toLowerCase()));
return new Promise((resolve) => {
setTimeout(() => {
resolve(filterOptions(inputValue));
}, 500);
});
};
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 = (
inputValue: string,
{ trigger }: { trigger: ComboboxV2LoadOptionsTrigger }
): Promise<ComboboxV2OptionValue[]> => {
const filterOptions = (inputValue: string) =>
benefits.filter((el) => el.value.toLowerCase().includes(inputValue.toLowerCase()));
return new Promise((resolve) => {
setTimeout(() => {
trigger.type === ComboboxV2LoadOptionsTriggerType.Toggle
? resolve(filterOptions(""))
: 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 = (inputValue: string): Promise<ComboboxV2OptionValue[]> => {
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}
usePortal
>
<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 />);