Combobox

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

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

• autoHeight

  Tyyppi: boolean

  Oletusarvo: true

  Skaalaa valikon korkeuden automaattisesti.

• children

  Tyyppi: ReactNode

  Komponentin sisältö

• className

  Tyyppi: string

  Utility-luokat ulkoasun muokkaamiseen

• defaultOptions

  Tyyppi: ComboboxOptionValue[]

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

• defaultValue

  Tyyppi: ComboboxOptionValue

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

  Komponentin oletusarvo

• 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)

• inputRef

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

  Komponentin input-elementille välitettävä ref

• inputWidth

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

  Kentän leveys (asetetaan antamalla palstaelementti)

• invalid

  Tyyppi: boolean

  Oletusarvo: false

  Virhetilanteen korostus

• labelText

  Tyyppi: ReactNode

  Kentän nimilappu

• leftCol

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

  Kaksipalstaiselle asettelulle (asetetaan antamalla palstaelementti)

• loadOptions

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

  Komponentin ulkopuolelta tulevat valinnat

• loadingText

  Tyyppi: string

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

• noOptionsLabel

  Tyyppi: string

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

• nothingIsSelectedLabel

  Tyyppi: string

  Oletusarvo: ""

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

• onBlur

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

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

• onChange

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

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

• onEnter

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

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

• onSelect

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

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

• placeholder

  Tyyppi: string

  Komponentin input-elementin placeholder-teksti

• readOnly

  Tyyppi: boolean

  Oletusarvo: false

  Kenttä jonka sisältöä ei voi muokata

• ref

  Tyyppi: Ref<ComboboxRef>

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

• required

  Tyyppi: boolean

  Oletusarvo: false

  Pakollisen kentän korostus

• requiredLabel

  Tyyppi: string

  'Pakollinen tieto' -teksti

• selectedLabel

  Tyyppi: string

  Oletusarvo: ""

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

• 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 esim. taulukoissa.

• util

  Poistuva

  Tyyppi: string

  Utility-luokat ulkoasun muokkaamiseen @deprecated Poistuu käytöstä versiossa 15.0.0. Käytä className-proppia.

ComboboxMenu

• testId

  Tyyppi: string

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

• util

  Poistuva

  Tyyppi: string

  Utility-luokat ulkoasun muokkaamiseen @deprecated Poistuu käytöstä versiossa 15.0.0. Käytä className-proppia.

ComboboxMenuOption

• index

  Tyyppi: number

  Näppäimistönavigaation korostukseen tarvittava indeksi

• isOtherOption

  Tyyppi: boolean

  Oletusarvo: false

  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

• util

  Poistuva

  Tyyppi: string

  Utility-luokat ulkoasun muokkaamiseen @deprecated Poistuu käytöstä versiossa 15.0.0. Käytä className-proppia.

• 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.