Represents a control that provides a menu of options.
Element
igc-select
Slots
default — Renders the list of select items.
prefix — Renders content before the input.
suffix — Renders content after input.
header — Renders a container before the list of options.
footer — Renders a container after the list of options.
helper-text — Renders content below the input.
toggle-icon — Renders content inside the suffix container.
toggle-icon-expanded — Renders content for the toggle icon when the component is in open state.
value-missing — Renders content when the required validation fails.
custom-error — Renders content when setCustomValidity(message) is set.
invalid — Renders content when the component is in invalid state (validity.valid = false).
CSS Parts
list — The list wrapping container for the items of the igc-select.
input — The encapsulated igc-input of the igc-select.
label — The encapsulated text label of the igc-select.
prefix — The prefix wrapper of the input of the igc-select.
suffix — The suffix wrapper of the input of the igc-select.
toggle-icon — The toggle icon wrapper of the igc-select.
helper-text — The helper text wrapper of the igc-select.

Constructors

Section titled "Constructors"

IgcSelectComponent 

new IgcSelectComponent(): IgcSelectComponent

Defined in src/components/select/select.ts:288

Returns IgcSelectComponent

Properties

Section titled "Properties"

autofocus

Section titled "autofocus"

The autofocus attribute of the control.

 
autofocus: boolean

Defined in src/components/select/select.ts:218

disabled

Section titled "disabled"

Inherited from: FormAssociatedRequiredMixin( EventEmitterMixin< IgcSelectComponentEventMap, AbstractConstructor<IgcComboBoxBaseLikeComponent> >(IgcComboBoxBaseLikeComponent) )

The disabled state of the component.

 
disabled: boolean

Defined in src/components/common/mixins/forms/types.ts:29

distance

Section titled "distance"

The distance of the select dropdown from its input.

 
distance: number = 0

Defined in src/components/select/select.ts:225

emitEvent

Section titled "emitEvent"

Inherited from: FormAssociatedRequiredMixin( EventEmitterMixin< IgcSelectComponentEventMap, AbstractConstructor<IgcComboBoxBaseLikeComponent> >(IgcComboBoxBaseLikeComponent) ) 

emitEvent: object & object

Defined in src/components/common/mixins/event-emitter.ts:30, src/components/common/mixins/combo-box.ts:16

invalid

Section titled "invalid"

Inherited from: FormAssociatedRequiredMixin( EventEmitterMixin< IgcSelectComponentEventMap, AbstractConstructor<IgcComboBoxBaseLikeComponent> >(IgcComboBoxBaseLikeComponent) )

Sets the control into invalid state (visual state only).

 
invalid: boolean

Defined in src/components/common/mixins/forms/types.ts:36

keepOpenOnOutsideClick

Section titled "keepOpenOnOutsideClick"

Inherited from: FormAssociatedRequiredMixin( EventEmitterMixin< IgcSelectComponentEventMap, AbstractConstructor<IgcComboBoxBaseLikeComponent> >(IgcComboBoxBaseLikeComponent) )

Whether the component dropdown should be kept open on clicking outside of it.

 
keepOpenOnOutsideClick: boolean = false

Defined in src/components/common/mixins/combo-box.ts:120

keepOpenOnSelect

Section titled "keepOpenOnSelect"

Inherited from: FormAssociatedRequiredMixin( EventEmitterMixin< IgcSelectComponentEventMap, AbstractConstructor<IgcComboBoxBaseLikeComponent> >(IgcComboBoxBaseLikeComponent) )

Whether the component dropdown should be kept open on selection.

 
keepOpenOnSelect: boolean = false

Defined in src/components/common/mixins/combo-box.ts:108

label

Section titled "label"

The label attribute of the control.

 
label: string

Defined in src/components/select/select.ts:232

name

Section titled "name"

Inherited from: FormAssociatedRequiredMixin( EventEmitterMixin< IgcSelectComponentEventMap, AbstractConstructor<IgcComboBoxBaseLikeComponent> >(IgcComboBoxBaseLikeComponent) )

The name attribute of the control.

 
name: string

Defined in src/components/common/mixins/forms/types.ts:42

open

Section titled "open"

Inherited from: FormAssociatedRequiredMixin( EventEmitterMixin< IgcSelectComponentEventMap, AbstractConstructor<IgcComboBoxBaseLikeComponent> >(IgcComboBoxBaseLikeComponent) )

Sets the open state of the component.

 
open: boolean = false

Defined in src/components/common/mixins/combo-box.ts:32

outlined

Section titled "outlined"

The outlined attribute of the control.

 
outlined: boolean = false

Defined in src/components/select/select.ts:211

placeholder

Section titled "placeholder"

The placeholder attribute of the control.

 
placeholder: string

Defined in src/components/select/select.ts:239

placement

Section titled "placement"

The preferred placement of the select dropdown around its input.

 
placement: PopoverPlacement = 'bottom-start'

Defined in src/components/select/select.ts:245

scrollStrategy

Section titled "scrollStrategy"

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

 
scrollStrategy: PopoverScrollStrategy = 'scroll'

Defined in src/components/select/select.ts:252

styles

Section titled "styles" 
styles: CSSResult[]

Defined in src/components/select/select.ts:126

tagName

Section titled "tagName"

The tagName read-only property of the Element interface returns the tag name of the element on which it's called.

MDN Reference

 
tagName: "igc-select" = 'igc-select'

Defined in src/components/select/select.ts:125

Accessors

Section titled "Accessors"

defaultValue

Section titled "defaultValue"

Inherited from: FormAssociatedRequiredMixin( EventEmitterMixin< IgcSelectComponentEventMap, AbstractConstructor<IgcComboBoxBaseLikeComponent> >(IgcComboBoxBaseLikeComponent) ) 

get defaultValue(): unknown

Defined in src/components/common/mixins/forms/types.ts:163

Returns unknown

The initial value of the component.

 
set defaultValue(value: unknown): void

Defined in src/components/common/mixins/forms/types.ts:162

Parameters

  • value: unknown

Returns void

form

Section titled "form"

Inherited from: FormAssociatedRequiredMixin( EventEmitterMixin< IgcSelectComponentEventMap, AbstractConstructor<IgcComboBoxBaseLikeComponent> >(IgcComboBoxBaseLikeComponent) )

Returns the HTMLFormElement associated with this element.

 
get form(): HTMLFormElement | null

Defined in src/components/common/mixins/forms/types.ts:45

Returns HTMLFormElement | null

groups

Section titled "groups"

Returns the groups of the igc-select component.

 
get groups(): IgcSelectGroupComponent[]

Defined in src/components/select/select.ts:262

Returns IgcSelectGroupComponent[]

items

Section titled "items"

Returns the items of the igc-select component.

 
get items(): IgcSelectItemComponent[]

Defined in src/components/select/select.ts:255

Returns IgcSelectItemComponent[]

required

Section titled "required"

Inherited from: FormAssociatedRequiredMixin( EventEmitterMixin< IgcSelectComponentEventMap, AbstractConstructor<IgcComboBoxBaseLikeComponent> >(IgcComboBoxBaseLikeComponent) ) 

get required(): boolean

Defined in src/components/common/mixins/forms/types.ts:181

Returns boolean

When set, makes the component a required field for validation.

 
set required(value: boolean): void

Defined in src/components/common/mixins/forms/types.ts:180

Parameters

  • value: boolean

Returns void

selectedItem

Section titled "selectedItem"

Returns the selected item from the dropdown or null.

 
get selectedItem(): IgcSelectItemComponent | null

Defined in src/components/select/select.ts:269

Returns IgcSelectItemComponent | null

validationMessage

Section titled "validationMessage"

Inherited from: FormAssociatedRequiredMixin( EventEmitterMixin< IgcSelectComponentEventMap, AbstractConstructor<IgcComboBoxBaseLikeComponent> >(IgcComboBoxBaseLikeComponent) )

A string containing the validation message of this element.

 
get validationMessage(): string

Defined in src/components/common/mixins/forms/types.ts:54

Returns string

validity

Section titled "validity"

Inherited from: FormAssociatedRequiredMixin( EventEmitterMixin< IgcSelectComponentEventMap, AbstractConstructor<IgcComboBoxBaseLikeComponent> >(IgcComboBoxBaseLikeComponent) )

Returns a ValidityState object which represents the different validity states the element can be in, with respect to constraint validation.

 
get validity(): ValidityState

Defined in src/components/common/mixins/forms/types.ts:51

Returns ValidityState

value

Section titled "value" 
get value(): string | undefined

Defined in src/components/select/select.ts:202

Returns string | undefined

The value attribute of the control.

 
set value(value: string | undefined): void

Defined in src/components/select/select.ts:196

Parameters

  • value: string | undefined

Returns void

willValidate

Section titled "willValidate"

Inherited from: FormAssociatedRequiredMixin( EventEmitterMixin< IgcSelectComponentEventMap, AbstractConstructor<IgcComboBoxBaseLikeComponent> >(IgcComboBoxBaseLikeComponent) )

A boolean value which returns true if the element is a submittable element that is a candidate for constraint validation.

 
get willValidate(): boolean

Defined in src/components/common/mixins/forms/types.ts:60

Returns boolean

Methods

Section titled "Methods"

addEventListener

Section titled "addEventListener"

Inherited from: FormAssociatedRequiredMixin( EventEmitterMixin< IgcSelectComponentEventMap, AbstractConstructor<IgcComboBoxBaseLikeComponent> >(IgcComboBoxBaseLikeComponent) ) 

addEventListener(type: K, listener: object, options: boolean | AddEventListenerOptions): void

Defined in src/components/common/mixins/event-emitter.ts:7

Parameters

  • type: K
  • listener: object
  • options: boolean | AddEventListenerOptions

Returns void

blur

Section titled "blur"

Removes focus from the component.

 
blur(): void

Defined in src/components/select/select.ts:561

Returns void

checkValidity

Section titled "checkValidity"

Inherited from: FormAssociatedRequiredMixin( EventEmitterMixin< IgcSelectComponentEventMap, AbstractConstructor<IgcComboBoxBaseLikeComponent> >(IgcComboBoxBaseLikeComponent) )

Checks for validity of the control and emits the invalid event if it invalid.

 
checkValidity(): boolean

Defined in src/components/common/mixins/forms/types.ts:146

Returns boolean

clearSelection

Section titled "clearSelection"

Resets the current value and selection of the component.

 
clearSelection(): void

Defined in src/components/select/select.ts:604

Returns void

focus

Section titled "focus"

Sets focus on the component.

 
focus(options: FocusOptions): void

Defined in src/components/select/select.ts:555

Parameters

  • options: FocusOptions

Returns void

hide

Section titled "hide"

Inherited from: FormAssociatedRequiredMixin( EventEmitterMixin< IgcSelectComponentEventMap, AbstractConstructor<IgcComboBoxBaseLikeComponent> >(IgcComboBoxBaseLikeComponent) )

Hides the component.

 
hide(): Promise<boolean>

Defined in src/components/common/mixins/combo-box.ts:90

Returns Promise<boolean>

Section titled "navigateTo"

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

 
navigateTo(value: string): IgcSelectItemComponent | null

Defined in src/components/select/select.ts:574

Parameters

  • value: string

Returns IgcSelectItemComponent | null

removeEventListener

Section titled "removeEventListener"

Inherited from: FormAssociatedRequiredMixin( EventEmitterMixin< IgcSelectComponentEventMap, AbstractConstructor<IgcComboBoxBaseLikeComponent> >(IgcComboBoxBaseLikeComponent) ) 

removeEventListener(type: K, listener: object, options: boolean | EventListenerOptions): void

Defined in src/components/common/mixins/event-emitter.ts:17

Parameters

  • type: K
  • listener: object
  • options: boolean | EventListenerOptions

Returns void

reportValidity

Section titled "reportValidity"

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

 
reportValidity(): boolean

Defined in src/components/select/select.ts:566

Returns boolean

select

Section titled "select"

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

 
select(value: string): IgcSelectItemComponent | null

Defined in src/components/select/select.ts:592

Parameters

  • value: string

Returns IgcSelectItemComponent | null

setCustomValidity

Section titled "setCustomValidity"

Inherited from: FormAssociatedRequiredMixin( EventEmitterMixin< IgcSelectComponentEventMap, AbstractConstructor<IgcComboBoxBaseLikeComponent> >(IgcComboBoxBaseLikeComponent) )

Sets a custom validation message for the control. As long as message is not empty, the control is considered invalid.

 
setCustomValidity(message: string): void

Defined in src/components/common/mixins/forms/types.ts:155

Parameters

  • message: string

Returns void

show

Section titled "show"

Inherited from: FormAssociatedRequiredMixin( EventEmitterMixin< IgcSelectComponentEventMap, AbstractConstructor<IgcComboBoxBaseLikeComponent> >(IgcComboBoxBaseLikeComponent) )

Shows the component.

 
show(): Promise<boolean>

Defined in src/components/common/mixins/combo-box.ts:85

Returns Promise<boolean>

toggle

Section titled "toggle"

Inherited from: FormAssociatedRequiredMixin( EventEmitterMixin< IgcSelectComponentEventMap, AbstractConstructor<IgcComboBoxBaseLikeComponent> >(IgcComboBoxBaseLikeComponent) )

Toggles the open state of the component.

 
toggle(): Promise<boolean>

Defined in src/components/common/mixins/combo-box.ts:95

Returns Promise<boolean>

register

Section titled "register" 
register(): void

Defined in src/components/select/select.ts:129

Returns void

Events

Section titled "Events"

igcChange

Section titled "igcChange" 
igcChange: CustomEvent<IgcSelectItemComponent>

Defined in src/components/select/select.ts:60

igcClosed

Section titled "igcClosed" 
igcClosed: CustomEvent<void>

Defined in src/components/select/select.ts:69

igcClosing

Section titled "igcClosing" 
igcClosing: CustomEvent<void>

Defined in src/components/select/select.ts:68

igcOpened

Section titled "igcOpened" 
igcOpened: CustomEvent<void>

Defined in src/components/select/select.ts:67

igcOpening

Section titled "igcOpening" 
igcOpening: CustomEvent<void>

Defined in src/components/select/select.ts:66