Multiselect

React API

Multiselect

Ref-prop välitetään komponentin valintapainike-elementille (button).

• a11yTextAllItemsRemoved

  Ruudunlukijan lukema teksti kentän tyhjentyessä kaikista valinnoista

  Tyyppi: string

  Oletusarvo: Valinnat poistettu

• a11yTextAvailableOptions

  Ruudunlukijan lukema teksti valintojen päivittyessä hakua käytettäessä

  Tyyppi: string

  Oletusarvo: Valittavien vaihtoehtojen lukumäärä on ${resultCount}, käytä nuoli ylös ja nuoli alas -näppäimiä siirtääksesi kohdistusta vaihtoehtojen välillä. Valitse vaihtoehto painamalla enter tai välilyönti -näppäintä.

• a11yTextNoSelectedItems

  Ruudunlukijan lukema teksti, kun kohdistus siirretään kenttään, eikä valintoja ole tehtynä.

  Tyyppi: string

  Oletusarvo: Ei valintoja

• 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

• disabled

  Estetty (disabloitu) kenttä / linkki / painike

  Tyyppi: boolean

  Oletusarvo: false

• errorText

  Virheilmoitus

  Tyyppi: string

• groupBy

  Funktio valintojen ryhmittelyyn.

  Tyyppi: (items: MultiselectOptions) => MultiselectOptionGroup[]

• helpText

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

  Tyyppi: string

• infoText

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

  Tyyppi: string

• initialSelectedItems

  Lista oletuksena valittuina näytettävistä valinnoista. Ei käytössä kun valintoja hallitaan komponentin ulkopuolelta selectedItems-propilla.

  Tyyppi: MultiselectOptions

  Oletusarvo: []

• inputWidth

  Select-kentän leveys (asetetaan antamalla palstaelementti)

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

• invalid

  Virhetilanteen korostus

  Tyyppi: boolean

  Oletusarvo: false

• items

  Pakollinen

  Lista näytettävistä valinnoista

  Tyyppi: MultiselectOptions

• itemsSelectedText

  Kentässä valintojen lukumäärän perässä näytettävä teksti, kun useampi kuin yksi valinta on tehtynä

  Tyyppi: string

  Oletusarvo: valittu

• labelText

  Kentän nimilappu

  Tyyppi: ReactNode

• leftCol

  Vasen palsta

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

• maxSelectedItems

  Rajoitus sallittujen valintojen lukumäärälle

  Tyyppi: number

• onBlur

  OnBlur-callback, kutsutaan kun fokus poistuu komponentista. Parametrina FocusEvent.

  Tyyppi: ((event: FocusEvent<HTMLElement, Element>) => void) & FocusEventHandler<HTMLDivElement>

• onFilteredItemsChange

  Valintoja suodatettaessa kutsuttava callback-funktio

  Tyyppi: (selectedItems: MultiselectOptions) => void

• onSelectedItemsChange

  Valintojen päivittyessä kutsuttava callback-funktio

  Tyyppi: (selectedItems: MultiselectOptions) => void

• optionListEmptyStateMessage

  Teksti joka näytetään kun valintojen haku ei palauta tuloksia

  Tyyppi: string

  Oletusarvo: Ei tuloksia

• placeholder

  Valintapainikkeen placeholder-teksti

  Tyyppi: string

  Oletusarvo: Valitse

• ref

  Tyyppi: Ref<HTMLButtonElement>

• renderOptionGroupHeader

  Render-prop valintavaihtoehtoryhmän otsikon räätälöintiin.

  Tyyppi: ({ groupName, groupHeaderId, groupIndex, groups, }: MultiselectOptionGroupHeaderRenderProps) => Element

• required

  Pakollisen kentän korostus

  Tyyppi: boolean

  Oletusarvo: false

• requiredLabel

  'Pakollinen tieto' -teksti

  Tyyppi: string

• resetButtonAriaLabel

  Reset-painikkeen toimintaa kuvaava teksti ruudunlukijaa varten

  Tyyppi: string

  Oletusarvo: Tyhjennä valinnat

• searchInputPlaceholderText

  Valintojen haku/suodatuskentän placeholder-teksti

  Tyyppi: string

  Oletusarvo: Suodata valintoja

• selectAllAriaLabel

  Valitse kaikki -valinnalle välitettävä aria-label

  Tyyppi: string

• selectAllLabel

  Valitse kaikki -valinnan teksti

  Tyyppi: string

• selectedItems

  Komponentin näyttämät valinnat

  Tyyppi: MultiselectOptions

• shouldFocusSearch

  Siirtää kohdistuksen automaattisesti hakukenttään, jos hakukenttä on käytössä (showSearch).

  Tyyppi: boolean

  Oletusarvo: false

• showReset

  Näytä/piilota reset-painike, joka tyhjentää kaikki valinnat

  Tyyppi: boolean

  Oletusarvo: true

• showSearch

  Näytä/piilota valintojen hakukenttä valikon ollessa auki

  Tyyppi: boolean

  Oletusarvo: false

• size

  Mukautettu komponentin kokoluokka

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

  Oletusarvo: md

• testId

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

  Tyyppi: string

• usePortal

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

  Tyyppi: boolean

  Oletusarvo: false

• variant

  Komponentin tyyppi. Filter-variantissa painikkeessa näytetään tekstinä nimilappu (labelText) ja tehtyjen valintojen lukumäärä.

  Tyyppi: "filter" | "default"

  Oletusarvo: default

MultiselectOptionGroupHeader

Multiselectin renderOptionGroupHeader-propin kanssa käytettävä komponentti.

• as

  Renderöitävä HTML-elementti

  Tyyppi: ElementType

  Oletusarvo: defaultElement as E

• children

  Komponentin sisältö

  Tyyppi: ReactNode

• className

  CSS-apuluokat ulkoasun muokkaamiseen.

  Tyyppi: string

• id

  Pakollinen

  Otsikon id, joka liittää otsikon ryhmään (aria-labelledby).

  Tyyppi: string

• size

  Mukautettu komponentin kokoluokka

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

• testId

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

  Tyyppi: string