ComboboxV2

React API

ComboboxV2

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

• a11yOptions

  Tekstit ja asetukset ruudunlukijalle.

  Tyyppi: Partial<ComboboxV2A11yOptions>

• addonAfter

  Kenttään sidottu teksti (InputText) tai painike, kentän lopussa.

  Tyyppi: Element

• addonBefore

  Kenttään sidottu teksti (InputText) tai painike, kentän alussa.

  Tyyppi: Element

• allowOnlyListedValues

  Sallii vain valikossa olevat arvot.

  Tyyppi: boolean

  Oletusarvo: false

• autoSize

  Poistuva

  Asettaa nimilapun, ohjetekstin ja aputekstin koon size-propin mukaisesti. @deprecated Poistuu versiossa 16.0.0 ja ominaisuudesta tulee oletus.

  Tyyppi: boolean

  Oletusarvo: false

• children

  Komponentin sisältö

  Tyyppi: ReactNode

• className

  CSS-apuluokat ulkoasun muokkaamiseen.

  Tyyppi: string

• defaultValue

  Komponentin oletusarvo. Käytössä vain kun komponenttia käytetään ei-kontrolloidusti.

  Tyyppi: string | ComboboxV2OptionValue

• disabled

  Estetty (disabloitu) kenttä / linkki / painike

  Tyyppi: boolean

  Oletusarvo: false

• dropdown

  Näytä pudotusvalikon painike

  Tyyppi: boolean

  Oletusarvo: false

• errorText

  Virheilmoitus

  Tyyppi: string

• helpText

  Ohjeteksti (näytetään kentän yläpuolella)

  Tyyppi: string

• infoText

  Aputeksti (näytetään kentän alapuolella)

  Tyyppi: string

• inputWidth

  Kentän leveys (asetetaan antamalla Column-elementti)

  Tyyppi: (children: ReactNode) => Element

• invalid

  Virhetilanteen korostus

  Tyyppi: boolean

  Oletusarvo: false

• labelText

  Kentän nimilappu

  Tyyppi: ReactNode

• leftCol

  Kaksipalstainen asettelu (asetetaan antamalla Column-elementti)

  Tyyppi: (children: ReactNode) => Element

• onBlur

  OnBlur-callback, jota kutsutaan kun kohdistus siirtyy input-kentästä pois. Parametrina FocusEvent<HTMLInputElement>.

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

• onChange

  OnChange-callback, jota kutsutaan kun input-kentän arvo muuttuu. Parametrina input-kentän arvo.

  Tyyppi: (value: string) => void

• onEnter

  OnEnter-callback, joka kutsutaan kun input-kentässä on painettu Enter. Parametrina KeyboardEvent<HTMLInputElement>.

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

• onSelect

  OnSelect-callback, jota kutsutaan kun käyttäjä tekee valinnan listasta. Parametrina merkkijono tai ComboboxV2OptionValue.

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

• ref

  Tyyppi: ForwardedRef<HTMLInputElement>

• requiredLabel

  'Pakollinen tieto' -teksti

  Tyyppi: string

• showOtherOptionAlways

  Määrittää näytetäänko muu-vaihtoehto aina.

  Tyyppi: boolean

  Oletusarvo: false

• showResetButton

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

  Tyyppi: boolean

  Oletusarvo: true

• size

  Mukautettu komponentin kokoluokka

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

  Oletusarvo: md

• startsWith

  Näytä vain syötetyllä tekstillä alkavat ehdotukset. Oletuksena näytetään kaikki ehdotukset, joihin syötetty teksti osuu.

  Tyyppi: boolean

  Oletusarvo: false

• testId

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

  Tyyppi: string

• threshold

  Ehdotuksiin vaadittavien merkkien minimimäärä

  Tyyppi: number

  Oletusarvo: 2

• usePortal

  Renderöi komponentin valikon portalin avulla. Estää komponentin valikon leikkautumisen, jos parent-elementin overflow on piilotettu esimerkiksi taulukoissa tai chat-kuplassa.

  Tyyppi: boolean

• value

  Kentän arvo, kun käytetään kontrolloituna komponenttina.

  Tyyppi: string

ComboboxV2Async

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

• a11yOptions

  Tekstit ja asetukset ruudunlukijalle.

  Tyyppi: Partial<ComboboxV2AsyncA11yOptions> & Partial<ComboboxV2A11yOptions>

• addonAfter

  Kenttään sidottu teksti (InputText) tai painike, kentän lopussa.

  Tyyppi: Element

• addonBefore

  Kenttään sidottu teksti (InputText) tai painike, kentän alussa.

  Tyyppi: Element

• allowOnlyListedValues

  Sallii vain valikossa olevat arvot.

  Tyyppi: boolean

  Oletusarvo: false

• asyncOptions

  Asetukset asykroniselle vaihtoehtojen lataukselle.

  Tyyppi: Partial<ComboboxV2AsyncOptions>

• autoSize

  Poistuva

  Asettaa nimilapun, ohjetekstin ja aputekstin koon size-propin mukaisesti. @deprecated Poistuu versiossa 16.0.0 ja ominaisuudesta tulee oletus.

  Tyyppi: boolean

  Oletusarvo: false

• children

  Komponentin sisältö

  Tyyppi: ReactNode

• className

  CSS-apuluokat ulkoasun muokkaamiseen.

  Tyyppi: string

• defaultValue

  Komponentin oletusarvo. Käytössä vain kun komponenttia käytetään ei-kontrolloidusti.

  Tyyppi: string | ComboboxV2OptionValue

• disabled

  Estetty (disabloitu) kenttä / linkki / painike

  Tyyppi: boolean

  Oletusarvo: false

• dropdown

  Näytä pudotusvalikon painike

  Tyyppi: boolean

  Oletusarvo: false

• errorText

  Virheilmoitus

  Tyyppi: string

• helpText

  Ohjeteksti (näytetään kentän yläpuolella)

  Tyyppi: string

• infoText

  Aputeksti (näytetään kentän alapuolella)

  Tyyppi: string

• inputWidth

  Kentän leveys (asetetaan antamalla Column-elementti)

  Tyyppi: (children: ReactNode) => Element

• invalid

  Virhetilanteen korostus

  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

  OnBlur-callback, jota kutsutaan kun kohdistus siirtyy input-kentästä pois. Parametrina FocusEvent<HTMLInputElement>.

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

• onChange

  OnChange-callback, jota kutsutaan kun input-kentän arvo muuttuu. Parametrina input-kentän arvo.

  Tyyppi: (value: string) => void

• onEnter

  OnEnter-callback, joka kutsutaan kun input-kentässä on painettu Enter. Parametrina KeyboardEvent<HTMLInputElement>.

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

• onSelect

  OnSelect-callback, jota kutsutaan kun käyttäjä tekee valinnan listasta. Parametrina merkkijono tai ComboboxV2OptionValue.

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

• ref

  Tyyppi: ForwardedRef<HTMLInputElement>

• requiredLabel

  'Pakollinen tieto' -teksti

  Tyyppi: string

• showOtherOptionAlways

  Määrittää näytetäänko muu-vaihtoehto aina.

  Tyyppi: boolean

  Oletusarvo: false

• showResetButton

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

  Tyyppi: boolean

  Oletusarvo: true

• size

  Mukautettu komponentin kokoluokka

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

  Oletusarvo: md

• startsWith

  Näytä vain syötetyllä tekstillä alkavat ehdotukset. Oletuksena näytetään kaikki ehdotukset, joihin syötetty teksti osuu.

  Tyyppi: boolean

  Oletusarvo: false

• testId

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

  Tyyppi: string

• threshold

  Ehdotuksiin vaadittavien merkkien minimimäärä

  Tyyppi: number

  Oletusarvo: 2

• usePortal

  Renderöi komponentin valikon portalin avulla. Estää komponentin valikon leikkautumisen, jos parent-elementin overflow on piilotettu esimerkiksi taulukoissa tai chat-kuplassa.

  Tyyppi: boolean

• value

  Kentän arvo, kun käytetään kontrolloituna komponenttina.

  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ä arvo testausta varten.

  Tyyppi: string

ComboboxV2MenuOption

• children

  Komponentin sisältö

  Tyyppi: ReactNode

• className

  CSS-apuluokat ulkoasun muokkaamiseen.

  Tyyppi: string

• index

  Näppäimistönavigaation korostukseen tarvittava indeksi

  Tyyppi: number

• isOtherOption

  Muuttaa valintavaihtoehdon muu-vaihtoehdoksi, joka näytetään kun hakutuloksia ei löydy.

  Tyyppi: boolean

• label

  Valintavaihtoehdon nimi, joka näytetään valikossa ja jonka perusteella vaihtoehtoja suodatetaan. Arvo asetetaan myös tekstikentän sisällöksi, kun asiakas on valinnut listasta vaihtoehdon.

  Tyyppi: string

• render

  Reactin render-prop, jolla voi muokata valinnan esitystä, parametrinä valinnan arvo korostettuna

  Tyyppi: (value: Element) => ReactNode

• testId

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

  Tyyppi: string

• value

  Pakollinen

  Valintavaihtoehdon arvo. Käytetään vaihtoehdon teknisenä arvona, kun valueta käytetään yhdessä labelin kanssa. Ilman labelia käyttäytyy labelin tavoin.

  Tyyppi: string