Options
All
  • Public
  • Public/Protected
  • All
Menu

Interface ListboxOptions

Hierarchy

Index

Properties

Methods

Properties

Optional disableMovementChange

disableMovementChange?: boolean

Boolean if using the keyboard should not immediately trigger the onChange callback. When this is enabled, the onChange callback will only be called if the user clicks an item or presses the enter or space key.

Optional getOptionId

getOptionId?: (baseId: string, index: number) => string

Type declaration

    • (baseId: string, index: number): string

    • The default way to generate a "unique" id for each option within the listbox by concatenating the current index with a base id.

      Note: The index will be incremented by 1 so the ids start from 1 instead of 0. This is so that it matches how paginated results work with aria-posinset

      • aria-setsize.

      Parameters

      • baseId: string

        The base id of the listbox.

      • index: number

        The current index of the option

      Returns string

      a "unique" id for the option

Optional getOptionLabel

getOptionLabel?: (option: ListboxOption, labelKey: string) => ReactNode

Type declaration

    • A function that will get the label for an option. The default behavior is to check if the option is an object. If it is, it'll use the labelKey property and fallback to the children property. If it is anything else, the option itself will be returned.

      This is used in both the select's button element to show the current value as well as rendering each option within the listbox component.

      Parameters

      • option: ListboxOption

        The option that should be converted into a renderable label element.

      • labelKey: string

        The object key to use to extract the label from an option object.

      Returns ReactNode

      a renderable label to display.

Optional getOptionValue

getOptionValue?: (item: unknown, valueKey?: string) => string

Type declaration

    • (item: unknown, valueKey?: string): string

    • The default implementation of the getItemValue search option that will attempt to "stringify" any unknown item as a string.

      internal

      Parameters

      • item: unknown

        The current item to transform

      • Optional valueKey: string

        The key to use that should hold the value if the item is an object

      Returns string

      the item as a string

Optional labelKey

labelKey?: string

A key to use that extracts the display label for an option from the options list. This will only be used if the option is an object and is passed to the getOptionLabel prop.

Optional name

name?: string

An optional name to provide for the listbox that will be provided with the onChange callback.

onChange

onChange: ListboxChangeEventHandler
see

ListboxChangeEventHandler

options

options: readonly ListboxOption[]

The list of options to display within the listbox.

Optional portal

portal?: boolean

Boolean if the portal should be used.

Optional portalInto

portalInto?: PortalInto
see

PortalProps.into

Optional portalIntoId

portalIntoId?: string
see

PortalProps.intoId

value

value: string

The listbox is a controlled component, so you will need to provide the current value and an onChange handler. The value must be a string and should be one of the option's values when something has been selected. If you want to have an "empty" select box to require the user to manually select something to be considered valid, you can set this to the empty string and it'll be considered "unvalued".

Optional valueKey

valueKey?: string

A key to use that extracts the value for the option from the options list. This will only be used if the option is an object and will be passed to the getOptionValue prop.

Methods

Optional isOptionDisabled

  • A function to call for each option to check if it is currently disabled. This is really just a convenience prop so that you don't need to modify the options yourself.

    Parameters

    Returns boolean

Generated using TypeDoc