Combobox

React API

Combobox

Ref-objekti palauttaa funktio-kutsut arvon tyhjentämiseen ja päivittämiseen komponentin ulkopuolelta käsin. InputRef-prop välitetään komponentin input-elementille.

• 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. Palautetaan onSelect kun fokus siirtyy input-kentästä, vaikka pudotusvalikosta ei ole valittu mitään.

  Tyyppi: boolean

  Oletusarvo: false

• autoHeight

  Skaalaa valikon korkeuden automaattisesti.

  Tyyppi: boolean

  Oletusarvo: true

• children

  Komponentin sisältö

  Tyyppi: ReactNode

• className

  CSS-apuluokat ulkoasun muokkaamiseen.

  Tyyppi: string

• defaultOptions

  Komponentille annettavat oletusvalinnat. Mikäli oletusvalintoja ei anneta, haetaan valintavaihtoehdot välittömästi loadOptions-funktiossa kuvatulla kutsulla.

  Tyyppi: ComboboxOptionValue[]

• defaultValue

  Komponentin oletusarvo

  Tyyppi: ComboboxOptionValue

  Oletusarvo: { value: "", label: "" }

• 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

• id

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

  Tyyppi: string

• infoText

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

  Tyyppi: string

• inputRef

  Komponentin input-elementille välitettävä ref

  Tyyppi: MutableRefObject<HTMLInputElement> | ((instance: HTMLInputElement) => void)

• inputWidth

  Kentän leveys (asetetaan antamalla palstaelementti)

  Tyyppi: (children: ReactNode) => ReactElement<any, string | JSXElementConstructor<any>>

• invalid

  Virhetilanteen korostus

  Tyyppi: boolean

  Oletusarvo: false

• labelText

  Kentän nimilappu

  Tyyppi: ReactNode

• leftCol

  Kaksipalstaiselle asettelulle (asetetaan antamalla palstaelementti)

  Tyyppi: (children: ReactNode) => ReactElement<any, string | JSXElementConstructor<any>>

• loadOptions

  Komponentin ulkopuolelta tulevat valinnat

  Tyyppi: (inputValue: string) => Promise<ComboboxOptionValue[]>

• loadingText

  loadOptions-proppia käytettäessä lataus indikaattorille annettava teksti.

  Tyyppi: string

• noOptionsLabel

  Teksti joka näytetään mikäli haku ei tuottanut valintavaihtoehtoja.

  Tyyppi: string

• nothingIsSelectedLabel

  Teksti, joka kertoo, että mitään ei ole valittu, ruudunlukijoille tarkoitettu teksti. Esim. "Valintaa ei ole tehty."

  Tyyppi: string

  Oletusarvo: ""

• onBlur

  OnBlur-callback, kutsutaan kun fokus siirtyy input-kentästä. Parametrina FocusEvent.

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

• onChange

  OnChange-callback, kutsutaan kun kentän sisältö muuttuu. Parametrina ChangeEvent.

  Tyyppi: (event: ChangeEvent<HTMLInputElement>) => void

• onEnter

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

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

• onSelect

  OnSelect-callback, kutsutaan kun käyttäjä valitsee listasta valinnan. Parametrina valinnan value-propertyn arvo tai objekti value- ja label-propertyjen arvoilla.

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

• placeholder

  Komponentin input-elementin placeholder-teksti

  Tyyppi: string

• readOnly

  Kenttä jonka sisältöä ei voi muokata

  Tyyppi: boolean

  Oletusarvo: false

• ref

  Ref-objekti palauttaa funktio-kutsut valinnan tyhjentämiseen ja päivittämiseen komponentin ulkopuolelta käsin.

  Tyyppi: Ref<ComboboxRef>

• required

  Pakollisen kentän korostus

  Tyyppi: boolean

  Oletusarvo: false

• requiredLabel

  'Pakollinen tieto' -teksti

  Tyyppi: string

• selectedLabel

  Valinnasta kertova teksti, ruudunlukijoille tarkoitettu teksti. Esim.: "Valittu".

  Tyyppi: string

  Oletusarvo: ""

• showOtherOptionAlways

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

  Tyyppi: boolean

  Oletusarvo: false

• 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

• type

  Input-kentän type-attribuutti

  Tyyppi: string

  Oletusarvo: text

• usePortal

  Renderöi komponentin valikon portalin avulla. Estää komponentin valikon leikkautumisen jos parent-elementin overflow on piilotettu esim. taulukoissa.

  Tyyppi: boolean

ComboboxMenu

• testId

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

  Tyyppi: string

ComboboxMenuOption

• 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

  Oletusarvo: false

• 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