ComboboxV2

React API

ComboboxV2

Ref-objekti välitetään komponentin input-elementille.

• a11yOptions

  Tekstit ja asetukset ruudunlukijalle.

  Tyyppi: Partial<ComboboxV2A11yOptions>

  Oletusarvo: {}

• addonAfter

  Input-kentän loppuun sijoitettava elementti: joko kenttään sidottu teksti (InputText) tai painike.

  Tyyppi: Element

• addonBefore

  Input-kentän alkuun sijoitettava elementti: joko kenttään sidottu teksti (InputText) tai painike.

  Tyyppi: Element

• allowOnlyListedValues

  Sallii vain valikossa olevat arvot.

  Tyyppi: boolean

  Oletusarvo: false

• children

  Komponentin sisältö.

  Tyyppi: ReactNode

• className

  CSS-apuluokat ulkoasun muokkaamiseen.

  Tyyppi: string

• defaultValue

  Komponentin oletusarvo. Käytetään vain, kun komponenttia käytetään ei-kontrolloidussa tilassa.

  Tyyppi: string | ComboboxV2OptionValue

• disabled

  Estää elementin käyttämisen.

  Tyyppi: boolean

  Oletusarvo: false

• dropdown

  Määrittää, näytetäänkö pudotusvalikon painike, jolla valikko voidaan avata tai sulkea.

  Tyyppi: boolean

  Oletusarvo: false

• errorText

  Virheilmoitus.

  Tyyppi: string

• helpText

  Ohjeteksti, joka näytetään kentän yläpuolella.

  Tyyppi: string

• infoText

  Aputeksti, joka näytetään kentän alapuolella.

  Tyyppi: string

• inputClassName

  Aina input-kentälle välitettävä CSS-luokka.

  Tyyppi: string

• inputWidth

  Kentän leveys (asetetaan antamalla Column-elementti).

  Tyyppi: (children: ReactNode) => Element

• invalid

  Korostaa virheellisen kentän.

  Tyyppi: boolean

  Oletusarvo: false

• labelText

  Kentän nimilappu.

  Tyyppi: ReactNode

• leftCol

  Kaksipalstainen asettelu (asetetaan antamalla Column-elementti).

  Tyyppi: (children: ReactNode) => Element

• onBlur

  Funktio, jota kutsutaan, kun kohdistus siirtyy pois input-kentästä.

  Tyyppi: (event: FocusEvent<HTMLInputElement, Element>) => void

• onChange

  Funktio, jota kutsutaan, kun input-kentän arvo muuttuu käyttäjän kirjoittaessa kenttään tai valitessa vaihtoehdon valikosta. Parametrina välitetään kentän arvo merkkijonona (value tai label), riippuen siitä, onko label-arvo annettu.

  Tyyppi: (value: string) => void

• onEnter

  Funktio, jota kutsutaan, kun input-kentässä painetaan Enter-näppäintä.

  Tyyppi: (event: KeyboardEvent<HTMLInputElement> & { target: HTMLInputElement; }) => void

• onSelect

  Funktio, jota kutsutaan, kun käyttäjä valitsee valikosta vaihtoehdon. Parametrina välitetään joko ComboboxV2OptionValue-objekti (sisältää label- ja value-arvot) tai pelkkä merkkijono (value), riippuen siitä, onko label-arvo annettu.

  Tyyppi: (value: string | ComboboxV2OptionValue) => void

• ref

  Komponentin input-kentälle välitettävä Reactin Ref-objekti.

  Tyyppi: Ref<HTMLInputElement>

• requiredLabel

  'Pakollinen tieto' -teksti ruudunlukijoille. Teksti ei näy käyttöliittymässä.

  Tyyppi: string

• showOtherOptionAlways

  Määrittää, näytetäänkö Muu-vaihtoehto myös silloin, kun muita ehdotuksia on saatavilla.

  Tyyppi: boolean

  Oletusarvo: false

• showResetButton

  Määrittää, näytetäänko painike, jolla input-kentän saa tyhjennettyä.

  Tyyppi: boolean

  Oletusarvo: true

• size

  Mukautettu komponentin kokoluokka

  Tyyppi: "xs" | "sm" | "md"

  Oletusarvo: md

• startsWith

  Määrittää, näytetäänkö vain ne ehdotukset, jotka alkavat syötetyllä tekstillä. Oletuksena näytetään kaikki ehdotukset, joissa kyseinen merkkijono esiintyy, sen sijainnista riippumatta.

  Tyyppi: boolean

  Oletusarvo: false

• testId

  Komponentin juurielementille data-testid-attribuuttiin välitettävä tunniste testausta varten.

  Tyyppi: string

• threshold

  Määrittää, kuinka monta merkkiä kenttään on syötettävä ennen kuin ehdotukset näytetään.

  Tyyppi: number

  Oletusarvo: 2

• usePortal

  Renderöi pudotusvalikon Portal-komponentin avulla. Estää valikon leikkautumisen tilanteissa, joissa parent-elementti ei salli sisällön näkymistä sen ulkopuolella, esimerkiksi taulukossa tai viestikuplassa.

  Tyyppi: boolean

• value

  Input-kentän arvo, kun komponenttia käytetään kontrolloidusti yhdessä onChange-funktion kanssa.

  Tyyppi: string

ComboboxV2Async

Ref-objekti välitetään komponentin input-elementille.

• a11yOptions

  Tekstit ja asetukset ruudunlukijalle.

  Tyyppi: Partial<ComboboxV2AsyncA11yOptions> & Partial<ComboboxV2A11yOptions>

  Oletusarvo: {}

• addonAfter

  Input-kentän loppuun sijoitettava elementti: joko kenttään sidottu teksti (InputText) tai painike.

  Tyyppi: Element

• addonBefore

  Input-kentän alkuun sijoitettava elementti: joko kenttään sidottu teksti (InputText) tai painike.

  Tyyppi: Element

• allowOnlyListedValues

  Sallii vain valikossa olevat arvot.

  Tyyppi: boolean

  Oletusarvo: false

• asyncOptions

  Asetukset asykroniselle vaihtoehtojen lataukselle.

  Tyyppi: Partial<ComboboxV2AsyncOptions>

  Oletusarvo: {}

• children

  Komponentin sisältö.

  Tyyppi: ReactNode

• className

  CSS-apuluokat ulkoasun muokkaamiseen.

  Tyyppi: string

• defaultValue

  Komponentin oletusarvo. Käytetään vain, kun komponenttia käytetään ei-kontrolloidussa tilassa.

  Tyyppi: string | ComboboxV2OptionValue

• disabled

  Estää elementin käyttämisen.

  Tyyppi: boolean

  Oletusarvo: false

• dropdown

  Määrittää, näytetäänkö pudotusvalikon painike, jolla valikko voidaan avata tai sulkea.

  Tyyppi: boolean

  Oletusarvo: false

• errorText

  Virheilmoitus.

  Tyyppi: string

• helpText

  Ohjeteksti, joka näytetään kentän yläpuolella.

  Tyyppi: string

• infoText

  Aputeksti, joka näytetään kentän alapuolella.

  Tyyppi: string

• inputClassName

  Aina input-kentälle välitettävä CSS-luokka.

  Tyyppi: string

• inputWidth

  Kentän leveys (asetetaan antamalla Column-elementti).

  Tyyppi: (children: ReactNode) => Element

• invalid

  Korostaa virheellisen kentän.

  Tyyppi: boolean

  Oletusarvo: false

• labelText

  Kentän nimilappu.

  Tyyppi: ReactNode

• leftCol

  Kaksipalstainen asettelu (asetetaan antamalla Column-elementti).

  Tyyppi: (children: ReactNode) => Element

• loadOptions

  Asynkronisesti ladattavat valintavaihtoehdot.

  Tyyppi: (inputValue: string, options: ComboboxV2LoadOptions) => Promise<ComboboxV2LoadOptionsResult>

• loadingText

  Teksti, joka näytetään valintavaihtoehtojen latauksen ajan. Tekstin voi jättää tyhjäksi, jolloin latauksesta ei ilmoiteta.

  Tyyppi: string

• noResultsText

  Teksti, joka näytetään mikäli haku ei tuottanut valintavaihtoehtoja. Tekstin voi jättää tyhjäksi, jolloin puuttuvista tuloksista ei ilmoiteta.

  Tyyppi: string

• onBlur

  Funktio, jota kutsutaan, kun kohdistus siirtyy pois input-kentästä.

  Tyyppi: (event: FocusEvent<HTMLInputElement, Element>) => void

• onChange

  Funktio, jota kutsutaan, kun input-kentän arvo muuttuu käyttäjän kirjoittaessa kenttään tai valitessa vaihtoehdon valikosta. Parametrina välitetään kentän arvo merkkijonona (value tai label), riippuen siitä, onko label-arvo annettu.

  Tyyppi: (value: string) => void

• onEnter

  Funktio, jota kutsutaan, kun input-kentässä painetaan Enter-näppäintä.

  Tyyppi: (event: KeyboardEvent<HTMLInputElement> & { target: HTMLInputElement; }) => void

• onSelect

  Funktio, jota kutsutaan, kun käyttäjä valitsee valikosta vaihtoehdon. Parametrina välitetään joko ComboboxV2OptionValue-objekti (sisältää label- ja value-arvot) tai pelkkä merkkijono (value), riippuen siitä, onko label-arvo annettu.

  Tyyppi: (value: string | ComboboxV2OptionValue) => void

• ref

  Komponentin input-kentälle välitettävä Reactin Ref-objekti.

  Tyyppi: Ref<HTMLInputElement>

• requiredLabel

  'Pakollinen tieto' -teksti ruudunlukijoille. Teksti ei näy käyttöliittymässä.

  Tyyppi: string

• showOtherOptionAlways

  Määrittää, näytetäänkö Muu-vaihtoehto myös silloin, kun muita ehdotuksia on saatavilla.

  Tyyppi: boolean

  Oletusarvo: false

• showResetButton

  Määrittää, näytetäänko painike, jolla input-kentän saa tyhjennettyä.

  Tyyppi: boolean

  Oletusarvo: true

• size

  Mukautettu komponentin kokoluokka

  Tyyppi: "xs" | "sm" | "md"

  Oletusarvo: md

• startsWith

  Määrittää, näytetäänkö vain ne ehdotukset, jotka alkavat syötetyllä tekstillä. Oletuksena näytetään kaikki ehdotukset, joissa kyseinen merkkijono esiintyy, sen sijainnista riippumatta.

  Tyyppi: boolean

  Oletusarvo: false

• testId

  Komponentin juurielementille data-testid-attribuuttiin välitettävä tunniste testausta varten.

  Tyyppi: string

• threshold

  Määrittää, kuinka monta merkkiä kenttään on syötettävä ennen kuin ehdotukset näytetään.

  Tyyppi: number

  Oletusarvo: 2

• usePortal

  Renderöi pudotusvalikon Portal-komponentin avulla. Estää valikon leikkautumisen tilanteissa, joissa parent-elementti ei salli sisällön näkymistä sen ulkopuolella, esimerkiksi taulukossa tai viestikuplassa.

  Tyyppi: boolean

• value

  Input-kentän arvo, kun komponenttia käytetään kontrolloidusti yhdessä onChange-funktion kanssa.

  Tyyppi: string

ComboboxV2Menu

• children

  Komponentin sisältö.

  Tyyppi: ReactNode

• className

  CSS-apuluokat ulkoasun muokkaamiseen.

  Tyyppi: string

• testId

  Komponentin juurielementille data-testid-attribuuttiin välitettävä tunniste testausta varten.

  Tyyppi: string

ComboboxV2MenuOption

• children

  Komponentin sisältö.

  Tyyppi: ReactNode

• className

  CSS-apuluokat ulkoasun muokkaamiseen.

  Tyyppi: string

• index

  Indeksi, jota käytetään näppäimistönavigoinnin korostukseen. Huom! Vain komponentin sisäiseen käyttöön.

  Tyyppi: number

• isOtherOption

  Muuttaa valintavaihtoehdon Muu-vaihtoehdoksi, joka näytetään, kun hakutuloksia ei ole.

  Tyyppi: boolean

• label

  Käyttäjälle näkyvä valintavaihtoehdon nimilappu, joka näytetään valikossa ja input-kentässä. Välitetään myös onChange-funktion parametrina value-arvon sijasta.

  Tyyppi: string

• render

  Valintavaihtoehdon muokkauksen mahdollistava render-funktio. Parametrina välitetään valinnan arvo korostettuna.

  Tyyppi: (value: Element) => ReactNode

• testId

  Komponentin juurielementille data-testid-attribuuttiin välitettävä tunniste testausta varten.

  Tyyppi: string

• value

  Pakollinen

  Valintavaihtoehdon tekninen avain. Value-arvo näytetään valikossa ja input-kentässä, jos label-arvoa ei ole annettu. Ilman labelia palautuu onChange-funktion parametrina. Jos label on annettu, value-arvo toimii vain valintavaihtoehdon teknisenä tunnisteena, eikä sitä näytetä käyttöliittymässä, eikä sen perusteella voi suodattaa valintoja.

  Tyyppi: string