MultiselectV2

React API

MultiselectV2

Ref-prop välitetään komponentin valintapainikkeelle.

• a11yOptions

  Saavutettavuusasetukset

  Tyyppi: MultiselectV2A11yOptions

  Oletusarvo: { isVirtual: true }

• buttonClassName

  Valikon avaavalle painikkeelle välitettävä CSS-luokka.

  Tyyppi: string

• defaultValue

  Lista oletuksena valittuina näytettävistä valinnoista. Ei käytössä, jos valintoja hallitaan komponentin ulkopuolelta value- ja onChange-propeilla.

  Tyyppi: MultiselectV2Option[]

  Oletusarvo: []

• errorText

  Virheilmoitus.

  Tyyppi: string

• filterItems

  Funktio valintojen räätälöityyn suodatukseen ja järjestämiseen.

  Tyyppi: (str: string, items: MultiselectV2Option[]) => MultiselectV2Option[]

• groupBy

  Funktio valintojen ryhmittelyyn.

  Tyyppi: (items: MultiselectV2Option[]) => MultiselectV2OptionGroup[]

• helpText

  Ohjeteksti, joka näytetään kentän yläpuolella.

  Tyyppi: string

• infoText

  Aputeksti, joka näytetään kentän alapuolella.

  Tyyppi: string

• inputWidth

  Painikkeen leveys (asetetaan antamalla palstaelementti).

  Tyyppi: (children: ReactNode) => Element

• invalid

  Korostaa virheellisen kentän.

  Tyyppi: boolean

  Oletusarvo: false

• isFilter

  Filter-versio siirtää nimilapun (labelText) painikkeen tekstiksi ja näyttää tehtyjen valintojen lukumäärän.

  Tyyppi: boolean

• items

  Pakollinen

  Lista näytettävistä valinnoista.

  Tyyppi: MultiselectV2Option[]

• labelText

  Kentän nimilappu

  Tyyppi: ReactNode

• leftCol

  Vasen palsta kaksipalstaiseen asetteluun.

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

• localization

  Komponentin tekstien ja ruudunlukijailmoitusten lokalisointi.

  Tyyppi: Partial<{ itemsRemoved: string; itemsSelected: string; noSelectedItems: string; searchResultsNotFound: string; searchResultsAvailable: string | (({ selectableResultCount, totalResultCount, }: Partial<{ selectableResultCount: number; totalResultCount: number; }>) => string); ... 4 more ...; togglePlaceholder: string;...

• maxSelectedItems

  Sallittujen valintojen lukumäärä.

  Tyyppi: number

• onBlur

  Funktio, jota kutsutaan, kun kohdistus poistuu painikkeesta.

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

• onChange

  Funktio, jota kutsutaan, kun valintoja valitaan tai poistetaan.

  Tyyppi: (selectedItems: MultiselectV2Option[]) => void

• onFilter

  Funktio, jota kutsutaan, kun valintoja suodatetaan (showSearch).

  Tyyppi: (selectedItems: MultiselectV2Option[]) => void

• ref

  Valikon avaavalle painikkeelle välitettävä ref.

  Tyyppi: Ref<HTMLButtonElement>

• renderOptionGroupHeader

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

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

• required

  Pakollisen kentän korostus

  Tyyppi: boolean

  Oletusarvo: false

• requiredLabel

  'Pakollinen tieto' -teksti ruudunlukijoille. Teksti ei näy käyttöliittymässä.

  Tyyppi: string

• shouldFocusDisabledOptions

  Sallii kohdistuksen siirtymisen estettyihin valintoihin.

  Tyyppi: boolean

  Oletusarvo: true

• shouldFocusSearch

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

  Tyyppi: boolean

  Oletusarvo: false

• showReset

  Määrittää näytetäänkö tyhjennä-painike.

  Tyyppi: boolean

  Oletusarvo: true

• showSearch

  Määrittää näytetäänkö valintojen suodatuskenttä valikon ollessa auki.

  Tyyppi: boolean

  Oletusarvo: false

• showSelectAll

  Määrittää näytetäänkö kaikki valinnat -valinta.

  Tyyppi: boolean

  Oletusarvo: false

• size

  Mukautettu komponentin kokoluokka

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

  Oletusarvo: md

• testId

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

  Tyyppi: string

• usePortal

  Renderöi valikon portaalin avulla sivun loppuun. Estää valikon leikkautumisen, jos ympäröivä elementti ei salli valikon näyttämistä sen ulkopuolella.

  Tyyppi: boolean

  Oletusarvo: false

• value

  Lista valittuina näytettävistä valinnoista. Käytä yhdessä onChange-propin kanssa.

  Tyyppi: MultiselectV2Option[]

MultiselectV2OptionGroupHeader

• as

  Renderöitävä HTML-elementti

  Tyyppi: ElementType

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

  Tyyppi: string