Siirry sisältöön
Kela Design System KDS

14.5.0
Luonnos

ComboboxV2

Tekstikentän ja valintalistan yhdistelmä, joka ehdottaa käyttäjälle valintoja.

Julkaistu versiossa 14.1.0

API

ComboboxV2

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

  • a11yOptions

    Tyyppi: Partial<ComboboxV2A11yOptions>

    Tekstit ja asetukset ruudunlukijalle.

  • addonAfter

    Tyyppi: Element

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

  • addonBefore

    Tyyppi: Element

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

  • allowOnlyListedValues

    Tyyppi: boolean

    Oletusarvo: false

    Sallii vain valikossa olevat arvot.

  • children

    Tyyppi: ReactNode

    Komponentin sisältö

  • className

    Tyyppi: string

    Utility-luokat ulkoasun muokkaamiseen

  • defaultValue

    Tyyppi: string | ComboboxV2OptionValue

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

  • disabled

    Tyyppi: boolean

    Oletusarvo: false

    Estetty (disabloitu) kenttä / linkki / painike

  • dropdown

    Tyyppi: boolean

    Oletusarvo: false

    Näytä pudotusvalikon painike

  • errorText

    Tyyppi: string

    Virheilmoitus

  • helpText

    Tyyppi: string

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

  • id

    Tyyppi: string

    Komponentin id-attribuutti. Jos id:tä ei anneta, se luodaan automaattisesti.

  • infoText

    Tyyppi: string

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

  • inputWidth

    Tyyppi: (children: ReactNode) => Element

    Kentän leveys (asetetaan antamalla Column-elementti)

  • invalid

    Tyyppi: boolean

    Oletusarvo: false

    Virhetilanteen korostus

  • labelText

    Tyyppi: ReactNode

    Kentän nimilappu

  • leftCol

    Tyyppi: (children: ReactNode) => Element

    Kaksipalstainen asettelu (asetetaan antamalla Column-elementti)

  • maxLength

    Tyyppi: number

    Input-kentän maksimipituus (aseta tämä valikon pisimmän arvon mukaisesti)

  • onBlur

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

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

  • onChange

    Tyyppi: (value: string) => void

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

  • onEnter

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

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

  • onSelect

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

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

  • placeholder

    Tyyppi: string

    Komponentin input-elementin placeholder-teksti

  • readOnly

    Tyyppi: boolean

    Oletusarvo: false

    Kenttä jonka sisältöä ei voi muokata.

  • ref

    Tyyppi: ForwardedRef<HTMLInputElement>

  • required

    Tyyppi: boolean

    Oletusarvo: false

    Pakollisen kentän korostus.

  • requiredLabel

    Tyyppi: string

    'Pakollinen tieto' -teksti

  • showOtherOptionAlways

    Tyyppi: boolean

    Oletusarvo: false

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

  • size

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

    Oletusarvo: md

    Mukautettu komponentin kokoluokka

  • startsWith

    Tyyppi: boolean

    Oletusarvo: false

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

  • testId

    Tyyppi: string

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

  • threshold

    Tyyppi: number

    Oletusarvo: 2

    Ehdotuksiin vaadittavien merkkien minimimäärä

  • type

    Tyyppi: string

    Oletusarvo: text

    Input-kentän type-attribuutti

  • usePortal

    Tyyppi: boolean

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

  • value

    Tyyppi: string

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

ComboboxV2Async

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

  • a11yOptions

    Tyyppi: Partial<ComboboxV2AsyncA11yOptions> & Partial<ComboboxV2A11yOptions>

    Tekstit ja asetukset ruudunlukijalle.

  • addonAfter

    Tyyppi: Element

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

  • addonBefore

    Tyyppi: Element

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

  • allowOnlyListedValues

    Tyyppi: boolean

    Oletusarvo: false

    Sallii vain valikossa olevat arvot.

  • asyncOptions

    Tyyppi: Partial<ComboboxV2AsyncOptions>

    Asetukset asykroniselle vaihtoehtojen lataukselle.

  • children

    Tyyppi: ReactNode

    Komponentin sisältö

  • className

    Tyyppi: string

    Utility-luokat ulkoasun muokkaamiseen

  • defaultValue

    Tyyppi: string | ComboboxV2OptionValue

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

  • disabled

    Tyyppi: boolean

    Oletusarvo: false

    Estetty (disabloitu) kenttä / linkki / painike

  • dropdown

    Tyyppi: boolean

    Oletusarvo: false

    Näytä pudotusvalikon painike

  • errorText

    Tyyppi: string

    Virheilmoitus

  • helpText

    Tyyppi: string

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

  • id

    Tyyppi: string

    Komponentin id-attribuutti. Jos id:tä ei anneta, se luodaan automaattisesti.

  • infoText

    Tyyppi: string

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

  • inputWidth

    Tyyppi: (children: ReactNode) => Element

    Kentän leveys (asetetaan antamalla Column-elementti)

  • invalid

    Tyyppi: boolean

    Oletusarvo: false

    Virhetilanteen korostus

  • labelText

    Tyyppi: ReactNode

    Kentän nimilappu

  • leftCol

    Tyyppi: (children: ReactNode) => Element

    Kaksipalstainen asettelu (asetetaan antamalla Column-elementti)

  • loadOptions

    Pakollinen

    Tyyppi: (inputValue: string, options?: ComboboxV2LoadOptions) => Promise<ComboboxV2OptionValue[]>

    Asynkronisesti ladattavat valintavaihtoehdot.

  • loadingText

    Tyyppi: string

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

  • maxLength

    Tyyppi: number

    Input-kentän maksimipituus (aseta tämä valikon pisimmän arvon mukaisesti)

  • noResultsText

    Tyyppi: string

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

  • onBlur

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

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

  • onChange

    Tyyppi: (value: string) => void

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

  • onEnter

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

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

  • onSelect

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

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

  • placeholder

    Tyyppi: string

    Komponentin input-elementin placeholder-teksti

  • readOnly

    Tyyppi: boolean

    Oletusarvo: false

    Kenttä jonka sisältöä ei voi muokata.

  • ref

    Tyyppi: ForwardedRef<HTMLInputElement>

  • required

    Tyyppi: boolean

    Oletusarvo: false

    Pakollisen kentän korostus.

  • requiredLabel

    Tyyppi: string

    'Pakollinen tieto' -teksti

  • showOtherOptionAlways

    Tyyppi: boolean

    Oletusarvo: false

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

  • size

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

    Oletusarvo: md

    Mukautettu komponentin kokoluokka

  • startsWith

    Tyyppi: boolean

    Oletusarvo: false

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

  • testId

    Tyyppi: string

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

  • threshold

    Tyyppi: number

    Oletusarvo: 2

    Ehdotuksiin vaadittavien merkkien minimimäärä

  • type

    Tyyppi: string

    Oletusarvo: text

    Input-kentän type-attribuutti

  • usePortal

    Tyyppi: boolean

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

  • value

    Tyyppi: string

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

ComboboxV2Menu

  • children

    Tyyppi: ReactNode

    Komponentin sisältö

  • className

    Tyyppi: string

    Utility-luokat ulkoasun muokkaamiseen

  • testId

    Tyyppi: string

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

ComboboxV2MenuOption

  • children

    Tyyppi: ReactNode

    Komponentin sisältö

  • className

    Tyyppi: string

    Utility-luokat ulkoasun muokkaamiseen

  • index

    Tyyppi: number

    Näppäimistönavigaation korostukseen tarvittava indeksi

  • isOtherOption

    Tyyppi: boolean

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

  • label

    Tyyppi: string

    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.

  • render

    Tyyppi: (value: Element) => ReactNode

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

  • testId

    Tyyppi: string

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

  • value

    Pakollinen

    Tyyppi: string

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