Combobox-komponentti poistuu käytöstä versiossa 16.0.0. Komponenttia ei enää kehitetä, eikä siihen lisätä uusia ominaisuuksia.
Tutustu uuteen ComboboxV2
Esikatselu
const values = [
{ value: "1", name: "Dolor" },
{ value: "2", name: "Sit amet" },
{ value: "3", name: "Consectetur adipiscing elit" },
];
const ComboboxExample = () => {
return (
<Combobox dropdown labelText="Lorem ipsum">
<ComboboxMenu>
{values.map((item) => (
<ComboboxMenuOption key={item.value} value={item.value} label={item.name} />
))}
</ComboboxMenu>
</Combobox>
);
};
render(<ComboboxExample />); Käyttötarkoitus
Combobox 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 voi asettaa selectedLabel ja nothingIsSelectedLabel-propit. nothingIsSelectedLabel määritää ruudunlukijalle välitettävän tekstin, joka kertoo, että valintaa ei ole tehty.
selectedLabel välittää ruudunlukijalle valinnasta kertovan tekstin.
const ComboboxExample = () => {
return (
<Combobox
labelText="Etuus"
helpText="Kirjoita ja valitse etuus"
nothingIsSelectedLabel="Ei valintaa"
selectedLabel="Valittu vaihtoehto"
allowOnlyListedValues
dropdown
threshold={1}
inputWidth={(children) => <Column md={6}>{children}</Column>}
>
<ComboboxMenu>
<ComboboxMenuOption value="Lapsilisä" />
<ComboboxMenuOption value="Lasten hoidon tuet" />
</ComboboxMenu>
</Combobox>
);
};
render(<ComboboxExample />); 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 (
<Combobox
type="text"
labelText="Pankin maa"
helpText="Kirjoita ja valitse maa"
required
inputWidth={(children) => <Column md={6}>{children}</Column>}
onChange={(event) => console.log("onChange", event.target.value)}
onSelect={(values) => console.log("onSelect", values)}
onBlur={(event) => console.log("onBlur", event.target.value)}
onEnter={(event) => console.log("onEnter", event.target.value)}
startsWith
selectedLabel="Valittu maa"
nothingIsSelectedLabel="Maata ei ole valittu"
threshold={1}
>
<ComboboxMenu>
{countries.map((item) => (
<ComboboxMenuOption className="kds-flex" key={item.value} value={item.value} label={item.name} />
))}
</ComboboxMenu>
</Combobox>
);
};
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.
// Testidataa
const benefits = [
{ benefit: "16 vuotta täyttäneen vammaistuki" },
{ benefit: "Adoptiotuki" },
{ benefit: "Elatustuki" },
{ benefit: "Eläkettä saavan hoitotuki" },
{ benefit: "Erityishoitoraha" },
{ benefit: "Isäkuukauden siirtämisestä ilmoittaminen" },
{ benefit: "Kuntoutusraha" },
{ benefit: "Lapsilisä" },
{ benefit: "Lastenhoidon tuet" },
{ benefit: "Matkakorvaus" },
{ benefit: "Opintotuki" },
{ benefit: "Opintotuen tulovalvonnan uudelleenkäsittelypyyntö" },
{ benefit: "Osasairauspäiväraha" },
{ benefit: "Peruspäiväraha" },
{ benefit: "Sairauspäiväraha" },
{ benefit: "Sotilasavustus" },
{ benefit: "Työmarkkinatuki" },
{ benefit: "Työttömyysajan ilmoitus" },
{ benefit: "Yleinen asumistuki" },
{ benefit: "Vanhempainpäivärahat" },
{ benefit: "Äitiysavustus" },
];
const BenefitSelector = () => (
<Combobox
labelText="Etuus"
helpText="Kirjoita ja valitse etuus"
inputWidth={(children) => <Column md={6}>{children}</Column>}
onChange={(event) => console.log("onChange", event.target.value)}
onSelect={(values) => console.log("onSelect", values)}
onBlur={(event) => console.log("onBlur", event.target.value)}
onEnter={(event) => console.log("onEnter", event.target.value)}
dropdown
selectedLabel="Valittu etuus"
nothingIsSelectedLabel="Etuutta ei ole valittu"
threshold={1}
>
<ComboboxMenu>
{benefits.map((item) => (
<ComboboxMenuOption key={item.benefit} value={item.benefit} />
))}
</ComboboxMenu>
</Combobox>
);
render(<BenefitSelector />); 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 (ComboboxMenuOption).
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
// Testidataa
const benefits = [
{ benefit: "16 vuotta täyttäneen vammaistuki" },
{ benefit: "Adoptiotuki" },
{ benefit: "Elatustuki" },
{ benefit: "Eläkettä saavan hoitotuki" },
{ benefit: "Erityishoitoraha" },
{ benefit: "Isäkuukauden siirtämisestä ilmoittaminen" },
{ benefit: "Kuntoutusraha" },
{ benefit: "Lapsilisä" },
{ benefit: "Lastenhoidon tuet" },
{ benefit: "Matkakorvaus" },
{ benefit: "Opintotuki" },
{ benefit: "Opintotuen tulovalvonnan uudelleenkäsittelypyyntö" },
{ benefit: "Osasairauspäiväraha" },
{ benefit: "Peruspäiväraha" },
{ benefit: "Sairauspäiväraha" },
{ benefit: "Sotilasavustus" },
{ benefit: "Työmarkkinatuki" },
{ benefit: "Työttömyysajan ilmoitus" },
{ benefit: "Yleinen asumistuki" },
{ benefit: "Vanhempainpäivärahat" },
{ benefit: "Äitiysavustus" },
];
const BenefitSelector = () => (
<Combobox
labelText="Etuus"
helpText="Kirjoita ja valitse etuus"
inputWidth={(children) => <Column md={6}>{children}</Column>}
onChange={(event) => console.log("onChange", event.target.value)}
onSelect={(values) => console.log("onSelect", values)}
onBlur={(event) => console.log("onBlur", event.target.value)}
onEnter={(event) => console.log("onEnter", event.target.value)}
dropdown
usePortal
allowOnlyListedValues
selectedLabel="Valittu etuus"
nothingIsSelectedLabel="Etuutta ei ole valittu"
threshold={1}
>
<ComboboxMenu>
{benefits.map((item) => (
<ComboboxMenuOption key={item.benefit} value={item.benefit} />
))}
</ComboboxMenu>
</Combobox>
);
render(<BenefitSelector />); Valikon muokkaus
Valintalistan sisältöä ja ulkoasua voi muokata käyttämällä ComboboxMenuOption-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.
const courses = [
{ 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" },
];
const CustomCombobox = () => (
<Combobox
labelText="Valitse uusittava resepti"
dropdown
threshold={1}
inputWidth={(children) => <Column md={6}>{children}</Column>}
>
<ComboboxMenu>
{courses.map((course) => (
<ComboboxMenuOption
key={course.title}
value={course.title}
render={(value) => (
<div className="kds-flex kds-flex-row kds-items-center kds-justify-between">
<div>{value}</div>
<Badge variant={course.status}>{course.statusMsg}</Badge>
</div>
)}
/>
))}
</ComboboxMenu>
</Combobox>
);
render(<CustomCombobox />); Virheilmoitus
<Combobox
labelText="Etuus"
helpText="Kirjoita ja valitse etuus"
errorText="Pakollinen tieto puuttuu. Valitse etuus."
required
invalid
dropdown
threshold={1}
inputWidth={(children) => <Column md={6}>{children}</Column>}
>
<ComboboxMenu>
<ComboboxMenuOption value="Lapsilisä" />
<ComboboxMenuOption value="Lasten hoidon tuet" />
</ComboboxMenu>
</Combobox> Estetty
<Combobox
labelText="Etuus"
helpText="Kirjoita ja valitse etuus"
disabled
dropdown
inputWidth={(children) => <Column md={6}>{children}</Column>}
/> Lukutila
<Combobox
labelText="Etuus"
helpText="Kirjoita ja valitse etuus"
value="Lapsilisä"
readOnly
dropdown
inputWidth={(children) => <Column md={6}>{children}</Column>}
/> Oletusvalinta
// Testidataa
const benefits = [
{ benefit: "16 vuotta täyttäneen vammaistuki" },
{ benefit: "Adoptiotuki" },
{ benefit: "Elatustuki" },
{ benefit: "Eläkettä saavan hoitotuki" },
{ benefit: "Erityishoitoraha" },
{ benefit: "Isäkuukauden siirtämisestä ilmoittaminen" },
{ benefit: "Kuntoutusraha" },
{ benefit: "Lapsilisä" },
{ benefit: "Lastenhoidon tuet" },
{ benefit: "Matkakorvaus" },
{ benefit: "Opintotuki" },
{ benefit: "Opintotuen tulovalvonnan uudelleenkäsittelypyyntö" },
{ benefit: "Osasairauspäiväraha" },
{ benefit: "Peruspäiväraha" },
{ benefit: "Sairauspäiväraha" },
{ benefit: "Sotilasavustus" },
{ benefit: "Työmarkkinatuki" },
{ benefit: "Työttömyysajan ilmoitus" },
{ benefit: "Yleinen asumistuki" },
{ benefit: "Vanhempainpäivärahat" },
{ benefit: "Äitiysavustus" },
];
const BenefitSelector = () => (
<Combobox
labelText="Etuus"
helpText="Kirjoita ja valitse etuus"
inputWidth={(children) => <Column md={6}>{children}</Column>}
onSelect={(values) => console.log("onSelect", values)}
dropdown
defaultValue={{ value: benefits[3].benefit }}
allowOnlyListedValues
selectedLabel="Valittu etuus"
nothingIsSelectedLabel="Etuutta ei ole valittu"
threshold={1}
>
<ComboboxMenu>
{benefits.map((item) => (
<ComboboxMenuOption key={item.benefit} value={item.benefit} />
))}
</ComboboxMenu>
</Combobox>
);
render(<BenefitSelector />); Tarvittaessa addonBefore ja addonAfter -propeilla voi yhdistää lisätietoja tai painikkeita komponentin input-kenttään.
<Combobox
labelText="Hae etuuden nimellä"
helpText="Kirjoita ja valitse etuus"
selectedLabel="Valittu etuus"
nothingIsSelectedLabel="Etuutta ei ole valittu"
inputWidth={(children) => <Column md={8}>{children}</Column>}
addonAfter={<Button>Hae</Button>}
threshold={1}
>
<ComboboxMenu>
{[
{ benefit: "16 vuotta täyttäneen vammaistuki" },
{ benefit: "Adoptiotuki" },
{ benefit: "Elatustuki" },
{ benefit: "Eläkettä saavan hoitotuki" },
{ benefit: "Erityishoitoraha" },
{ benefit: "Isäkuukauden siirtämisestä ilmoittaminen" },
{ benefit: "Kuntoutusraha" },
{ benefit: "Lapsilisä" },
{ benefit: "Lastenhoidon tuet" },
{ benefit: "Matkakorvaus" },
{ benefit: "Opintotuki" },
{ benefit: "Opintotuen tulovalvonnan uudelleenkäsittelypyyntö" },
{ benefit: "Osasairauspäiväraha" },
{ benefit: "Peruspäiväraha" },
{ benefit: "Sairauspäiväraha" },
{ benefit: "Sotilasavustus" },
{ benefit: "Työmarkkinatuki" },
{ benefit: "Työttömyysajan ilmoitus" },
{ benefit: "Yleinen asumistuki" },
{ benefit: "Vanhempainpäivärahat" },
{ benefit: "Äitiysavustus" },
].map((item) => (
<ComboboxMenuOption key={item.benefit} value={item.benefit} />
))}
</ComboboxMenu>
</Combobox> <Combobox
labelText="Etuus"
helpText="Kirjoita ja valitse etuus"
selectedLabel="Valittu etuus"
nothingIsSelectedLabel="Etuutta ei ole valittu"
addonBefore={<InputText addon>Lorem ipsum</InputText>}
inputWidth={(children) => <Column md={8}>{children}</Column>}
threshold={1}
>
<ComboboxMenu>
{[
{ benefit: "16 vuotta täyttäneen vammaistuki" },
{ benefit: "Adoptiotuki" },
{ benefit: "Elatustuki" },
{ benefit: "Eläkettä saavan hoitotuki" },
{ benefit: "Erityishoitoraha" },
{ benefit: "Isäkuukauden siirtämisestä ilmoittaminen" },
{ benefit: "Kuntoutusraha" },
{ benefit: "Lapsilisä" },
{ benefit: "Lastenhoidon tuet" },
{ benefit: "Matkakorvaus" },
{ benefit: "Opintotuki" },
{ benefit: "Opintotuen tulovalvonnan uudelleenkäsittelypyyntö" },
{ benefit: "Osasairauspäiväraha" },
{ benefit: "Peruspäiväraha" },
{ benefit: "Sairauspäiväraha" },
{ benefit: "Sotilasavustus" },
{ benefit: "Työmarkkinatuki" },
{ benefit: "Työttömyysajan ilmoitus" },
{ benefit: "Yleinen asumistuki" },
{ benefit: "Vanhempainpäivärahat" },
{ benefit: "Äitiysavustus" },
].map((item) => (
<ComboboxMenuOption key={item.benefit} value={item.benefit} />
))}
</ComboboxMenu>
</Combobox> Valinnan päivittäminen ja resetointi komponentin ulkopuolelta
Tarvittaessa kentän arvon voi päivittää komponentin ulkopuolelta hyödyntämällä ref-objektin mukana palautuvia reset- ja setValue-funktioita.
const benefits = [
{ benefit: "16 vuotta täyttäneen vammaistuki" },
{ benefit: "Adoptiotuki" },
{ benefit: "Elatustuki" },
{ benefit: "Eläkettä saavan hoitotuki" },
{ benefit: "Erityishoitoraha" },
{ benefit: "Isäkuukauden siirtämisestä ilmoittaminen" },
{ benefit: "Kuntoutusraha" },
{ benefit: "Lapsilisä" },
{ benefit: "Lastenhoidon tuet" },
{ benefit: "Matkakorvaus" },
{ benefit: "Opintotuki" },
{ benefit: "Opintotuen tulovalvonnan uudelleenkäsittelypyyntö" },
{ benefit: "Osasairauspäiväraha" },
{ benefit: "Peruspäiväraha" },
{ benefit: "Sairauspäiväraha" },
{ benefit: "Sotilasavustus" },
{ benefit: "Työmarkkinatuki" },
{ benefit: "Työttömyysajan ilmoitus" },
{ benefit: "Yleinen asumistuki" },
{ benefit: "Vanhempainpäivärahat" },
{ benefit: "Äitiysavustus" },
];
const BenefitSelector = () => {
const comboboxRef = React.useRef();
const inputRef = React.useRef();
return (
<>
<Combobox
ref={comboboxRef}
inputRef={inputRef}
labelText="Etuus"
helpText="Kirjoita ja valitse etuus"
inputWidth={(children) => <Column md={6}>{children}</Column>}
onSelect={(values) => console.log("onSelect", values)}
dropdown
allowOnlyListedValues
selectedLabel="Valittu etuus"
nothingIsSelectedLabel="Etuutta ei ole valittu"
threshold={1}
>
<ComboboxMenu>
{benefits.map((item) => (
<ComboboxMenuOption key={item.benefit} value={item.benefit} />
))}
</ComboboxMenu>
</Combobox>
<ButtonGroup horizontal>
<Button onClick={() => comboboxRef.current.setValue({ value: benefits[2].benefit })}>Aseta arvo</Button>
<Button onClick={() => comboboxRef.current.reset()} appearance="outline">
Tyhjennä
</Button>
</ButtonGroup>
</>
);
};
render(<BenefitSelector />); Async
Käytä loadOptions-proppia vaihtoehtojen näyttämiseen ja suodattamiseen komponentin ulkopuolelta.
loadOptions-propin kautta välitettävällä objektilla tulee olla value ja label -propertyt.
loadingText-prop välittää ruudunlukijalle näytettävän tekstin sekä näkyvän tekstin latausta suoritettaessa.
Komponentin näyttämät oletusvalinnat tulee määrittää defaultOptions-propin avulla. Jättämällä tämän propin pois, haetaan oletusvalinnat loadOptions-funktiossa kuvatulla kutsulla.
function AsyncSelector() {
// Testidataa
const benefits = [
{ value: "1", label: "16 vuotta täyttäneen vammaistuki" },
{ value: "2", label: "Adoptiotuki" },
{ value: "3", label: "Elatustuki" },
{ value: "4", label: "Eläkettä saavan hoitotuki" },
{ value: "5", label: "Erityishoitoraha" },
{ value: "6", label: "Isäkuukauden siirtämisestä ilmoittaminen" },
{ value: "7", label: "Kuntoutusraha" },
{ value: "8", label: "Lapsilisä" },
{ value: "9", label: "Yleinen asumistuki" },
{ value: "10", label: "Vanhempainpäivärahat" },
{ value: "11", label: "Äitiysavustus" },
];
const initialBenefits = [
{ value: "1", label: "Yleinen asumistuki" },
{ value: "2", label: "Vanhempainpäivärahat" },
{ value: "3", label: "Äitiysavustus" },
];
const filterOptions = (inputValue) =>
benefits.filter((el) => el.label.toLowerCase().includes(inputValue.toLowerCase()));
const promiseOptions = (inputValue) =>
new Promise((resolve) => {
setTimeout(() => {
resolve(filterOptions(inputValue));
}, 1000);
});
return (
<Combobox
labelText="Etuus"
helpText="Kirjoita ja valitse etuus"
inputWidth={(children) => <Column md={6}>{children}</Column>}
onSelect={(values) => console.log("onSelect", values)}
dropdown
loadOptions={promiseOptions}
defaultOptions={initialBenefits}
loadingText="Ladataan..."
noOptionsLabel="Ei tuloksia"
selectedLabel="Valittu etuus"
nothingIsSelectedLabel="Etuutta ei ole valittu"
/>
);
}
render(<AsyncSelector />); 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 benefits = [
{ benefit: "16 vuotta täyttäneen vammaistuki" },
{ benefit: "Adoptiotuki" },
{ benefit: "Elatustuki" },
{ benefit: "Eläkettä saavan hoitotuki" },
{ benefit: "Erityishoitoraha" },
{ benefit: "Isäkuukauden siirtämisestä ilmoittaminen" },
{ benefit: "Kuntoutusraha" },
{ benefit: "Lapsilisä" },
{ benefit: "Lastenhoidon tuet" },
{ benefit: "Matkakorvaus" },
{ benefit: "Opintotuki" },
{ benefit: "Opintotuen tulovalvonnan uudelleenkäsittelypyyntö" },
{ benefit: "Osasairauspäiväraha" },
{ benefit: "Peruspäiväraha" },
{ benefit: "Sairauspäiväraha" },
{ benefit: "Sotilasavustus" },
{ benefit: "Työmarkkinatuki" },
{ benefit: "Työttömyysajan ilmoitus" },
{ benefit: "Yleinen asumistuki" },
{ benefit: "Vanhempainpäivärahat" },
{ benefit: "Äitiysavustus" },
];
const BenefitSelector = () => (
<Combobox
labelText="Muu-vaihtoehto aina näkyvissä"
helpText="Kirjoita ja valitse etuus"
inputWidth={(children) => <Column md={6}>{children}</Column>}
onSelect={(values) => console.log("onSelect", values)}
selectedLabel="Valittu etuus"
nothingIsSelectedLabel="Etuutta ei ole valittu"
threshold={1}
dropdown
showOtherOptionAlways
>
<ComboboxMenu>
{benefits.map((item) => (
<ComboboxMenuOption key={item.benefit} value={item.benefit} />
))}
<ComboboxMenuOption isOtherOption value="Muu etuus" />
</ComboboxMenu>
</Combobox>
);
const BenefitSelectorCustom = () => (
<Combobox
labelText="Muu-vaihtoehto näkyvissä vain kun tuloksia ei löydy"
helpText="Kirjoita ja valitse etuus"
inputWidth={(children) => <Column md={6}>{children}</Column>}
onSelect={(values) => console.log("onSelect", values)}
selectedLabel="Valittu etuus"
nothingIsSelectedLabel="Etuutta ei ole valittu"
threshold={1}
>
<ComboboxMenu>
{benefits.map((item) => (
<ComboboxMenuOption key={item.benefit} value={item.benefit} />
))}
<ComboboxMenuOption
isOtherOption
value="Muu etuus"
render={(value) => (
<span>
<span className="kds-text-muted">Etuutta ei löytynyt</span>
<br />
<span>{value}</span>
</span>
)}
/>
</ComboboxMenu>
</Combobox>
);
render(
<>
<BenefitSelector />
<BenefitSelectorCustom />
</>
); Muu-vaihtoehdon käyttö async-version kanssa
Huomioi, että noOptionsLabel ylikirjoittaa “muu-vaihtoehdon”, joten älä käytä näitä toimintoja yhdessä.
function AsyncSelector() {
// Testidataa
const benefits = [
{ value: "1", label: "16 vuotta täyttäneen vammaistuki" },
{ value: "2", label: "Adoptiotuki" },
{ value: "3", label: "Elatustuki" },
{ value: "4", label: "Eläkettä saavan hoitotuki" },
{ value: "5", label: "Erityishoitoraha" },
{ value: "6", label: "Isäkuukauden siirtämisestä ilmoittaminen" },
{ value: "7", label: "Kuntoutusraha" },
{ value: "8", label: "Lapsilisä" },
{ value: "9", label: "Yleinen asumistuki" },
{ value: "10", label: "Vanhempainpäivärahat" },
{ value: "11", label: "Äitiysavustus" },
];
const initialBenefits = [
{ value: "1", label: "Yleinen asumistuki" },
{ value: "2", label: "Vanhempainpäivärahat" },
{ value: "3", label: "Äitiysavustus" },
];
const filterOptions = (inputValue) =>
benefits.filter((el) => el.label.toLowerCase().includes(inputValue.toLowerCase()));
const promiseOptions = (inputValue) =>
new Promise((resolve) => {
setTimeout(() => {
resolve(filterOptions(inputValue));
}, 1000);
});
return (
<>
<Combobox
labelText="Muu-vaihtoehto aina näkyvissä"
helpText="Kirjoita ja valitse etuus"
inputWidth={(children) => <Column md={6}>{children}</Column>}
onSelect={(values) => console.log("onSelect", values)}
dropdown
loadOptions={promiseOptions}
defaultOptions={initialBenefits}
loadingText="Ladataan..."
selectedLabel="Valittu etuus"
nothingIsSelectedLabel="Etuutta ei ole valittu"
showOtherOptionAlways
>
<ComboboxMenu>
<ComboboxMenuOption isOtherOption value="other" label="Muu etuus" />
</ComboboxMenu>
</Combobox>
<Combobox
labelText="Muu-vaihtoehto näkyvissä vain kun tuloksia ei löydy"
helpText="Kirjoita ja valitse etuus"
inputWidth={(children) => <Column md={6}>{children}</Column>}
onSelect={(values) => console.log("onSelect", values)}
loadOptions={promiseOptions}
loadingText="Ladataan..."
selectedLabel="Valittu etuus"
nothingIsSelectedLabel="Etuutta ei ole valittu"
>
<ComboboxMenu>
<ComboboxMenuOption
isOtherOption
value="other"
label="Muu etuus"
render={(value) => (
<span>
<span className="kds-text-muted">Etuutta ei löytynyt</span>
<br />
<span>{value}</span>
</span>
)}
/>
</ComboboxMenu>
</Combobox>
</>
);
}
render(<AsyncSelector />);