Ignite UI for React

All
  • Public
  • Public/Protected
  • All

Class IgrSelect

Represents a control that provides a menu of options.

Slot

  • Renders the list of select items.

Slot

prefix - Renders content before the input.

Slot

suffix - Renders content after input.

Slot

header - Renders a container before the list of options.

Slot

footer - Renders a container after the list of options.

Slot

helper-text - Renders content below the input.

Slot

toggle-icon - Renders content inside the suffix container.

Slot

toggle-icon-expanded - Renders content for the toggle icon when the component is in open state.

Slot

value-missing - Renders content when the required validation fails.

Slot

custom-error - Renders content when setCustomValidity(message) is set.

Slot

invalid - Renders content when the component is in invalid state (validity.valid = false).

Csspart

list - The list wrapping container for the items of the igc-select.

Csspart

input - The encapsulated igc-input of the igc-select.

Csspart

label - The encapsulated text label of the igc-select.

Csspart

prefix - The prefix wrapper of the input of the igc-select.

Csspart

suffix - The suffix wrapper of the input of the igc-select.

Csspart

toggle-icon - The toggle icon wrapper of the igc-select.

Csspart

helper-text - The helper text wrapper of the igc-select.

Callable

  • IgrSelect(): ReactNode

    Returns ReactNode

Accessors

Events

Methods

Properties

Accessors

groups

groups: IgrSelectGroup[]

Returns the groups of the igc-select component.

items

items: IgrSelectItem[]

Returns the items of the igc-select component.

selectedItem

selectedItem: IgrSelectItem

Returns the selected item from the dropdown or null.

Events

onChange

onChange: (args: CustomEvent<IgrSelectItem>) => void

Emitted when the control's checked state changes.

Type declaration

onClosed

onClosed: (args: CustomEvent<void>) => void

Emitted after the list of options is closed.

Type declaration

onClosing

onClosing: (args: CustomEvent<void>) => void

Emitter just before the list of options is closed.

Type declaration

onOpened

onOpened: (args: CustomEvent<void>) => void

Emitted after the list of options is opened.

Type declaration

onOpening

onOpening: (args: CustomEvent<void>) => void

Emitted just before the list of options is opened.

Type declaration

Methods

blur

  • blur(): void

    Removes focus from the component.

    Returns void

clearSelection

  • clearSelection(): void

    Resets the current value and selection of the component.

    Returns void

focus

  • focus(options?: FocusOptions): void

    Sets focus on the component.

    Parameters

    • options: FocusOptions

    Returns void

navigateTo

  • navigateTo(value: string): IgrSelectItem

    Navigates to the item with the specified value. If it exists, returns the found item, otherwise - null.

    Parameters

    • value: string

    Returns IgrSelectItem

  • navigateTo(index: number): IgrSelectItem

    Navigates to the item at the specified index. If it exists, returns the found item, otherwise - null.

    Parameters

    • index: number

    Returns IgrSelectItem

reportValidity

  • reportValidity(): boolean

    Checks the validity of the control and moves the focus to it if it is not valid.

    Returns boolean

select

  • select(value: string): IgrSelectItem

    Selects the item with the specified value. If it exists, returns the found item, otherwise - null.

    Parameters

    • value: string

    Returns IgrSelectItem

  • select(index: number): IgrSelectItem

    Selects the item at the specified index. If it exists, returns the found item, otherwise - null.

    Parameters

    • index: number

    Returns IgrSelectItem

Properties

autofocus

autofocus: boolean

The autofocus attribute of the control.

distance

distance: number

The distance of the select dropdown from its input.

label

label: string

The label attribute of the control.

outlined

outlined: boolean

The outlined attribute of the control.

placeholder

placeholder: string

The placeholder attribute of the control.

placement

placement: PopoverPlacement

The preferred placement of the select dropdown around its input.

scrollStrategy

scrollStrategy: PopoverScrollStrategy

Determines the behavior of the component during scrolling of the parent container.

value

value: string

The value attribute of the control.