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 select.
input — The encapsulated input of the select.
label — The encapsulated text label of the select.
prefix — The prefix wrapper of the input of the select.
suffix — The suffix wrapper of the input of the select.
toggle-icon — The toggle icon wrapper of the select.
helper-text — The helper text wrapper of the select.

Properties

Section titled "Properties"

autofocus

Section titled "autofocus"

Whether the control should receive focus automatically.

 
autofocus: boolean

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

disabled

Section titled "disabled"

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

The disabled state of the component.

 
disabled: boolean

Defined in src/internals/mixins/forms/types.ts:32

distance

Section titled "distance"

The distance of the select dropdown from its input.

 
distance: number = 0

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

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/internals/mixins/forms/types.ts:39

keepOpenOnOutsideClick

Section titled "keepOpenOnOutsideClick"

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

Keeps the dropdown of the component open when the user clicks outside of it.

 
keepOpenOnOutsideClick: boolean = false

Defined in src/internals/mixins/combo-box.ts:101

keepOpenOnSelect

Section titled "keepOpenOnSelect"

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

Keeps the dropdown of the component open after the user selects an item.

 
keepOpenOnSelect: boolean = false

Defined in src/internals/mixins/combo-box.ts:88

label

Section titled "label"

The label of the control.

 
label: string

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

name

Section titled "name"

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

The name of the control, submitted with the form data.

 
name: string

Defined in src/internals/mixins/forms/types.ts:45

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/internals/mixins/combo-box.ts:34

outlined

Section titled "outlined"

Whether the control has an outlined appearance.

 
outlined: boolean = false

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

placeholder

Section titled "placeholder"

The placeholder text of the control.

 
placeholder: string

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

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:260

scrollStrategy

Section titled "scrollStrategy"

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

Sets the behavior of the component when the parent container scrolls.

If the value is hide, the component hides while the anchor is fully out of view. hide is the default value.

If the value is scroll, the component stays visible and anchored.

If the value is close, the component closes on each scroll.

 
scrollStrategy: PopoverScrollStrategy = 'hide'

Defined in src/internals/mixins/combo-box.ts:49

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:133

Accessors

Section titled "Accessors"

defaultValue

Section titled "defaultValue"

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

get defaultValue(): any

Defined in src/internals/mixins/forms/types.ts:127

The initial value of the component.

 
set defaultValue(value: unknown): void

Defined in src/internals/mixins/forms/types.ts:127

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/internals/mixins/forms/types.ts:48

Returns HTMLFormElement | null

groups

Section titled "groups"

Returns the groups of the select component.

 
get groups(): IgcSelectGroupComponent[]

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

Returns IgcSelectGroupComponent[]

items

Section titled "items"

Returns the items of the select component.

 
get items(): IgcSelectItemComponent[]

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

Returns IgcSelectItemComponent[]

required

Section titled "required"

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

get required(): any

Defined in src/internals/mixins/forms/types.ts:151

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

 
set required(value: boolean): void

Defined in src/internals/mixins/forms/types.ts:151

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:277

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/internals/mixins/forms/types.ts:54

Returns string

validity

Section titled "validity"

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

Returns a ValidityState object for the element.

 
get validity(): ValidityState

Defined in src/internals/mixins/forms/types.ts:51

Returns ValidityState

value

Section titled "value" 
get value(): any

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

The value of the control.

 
set value(value: string | undefined): void

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

Parameters

  • value: string | undefined

Returns void

willValidate

Section titled "willValidate"

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

Returns true when the element is a candidate for constraint validation.

 
get willValidate(): boolean

Defined in src/internals/mixins/forms/types.ts:59

Returns boolean

Methods

Section titled "Methods"

blur

Section titled "blur"

Removes focus from the component.

 
blur(): void

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

Returns void

checkValidity

Section titled "checkValidity"

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

Checks validity and emits invalid when the control is invalid.

 
checkValidity(): boolean

Defined in src/internals/mixins/forms/types.ts:114

Returns boolean

clearSelection

Section titled "clearSelection"

Resets the current value and selection of the component.

 
clearSelection(): void

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

Returns void

focus

Section titled "focus"

Sets focus on the component.

 
focus(options: FocusOptions): void

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

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/internals/mixins/combo-box.ts:69

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:679

Parameters

  • value: string

Returns IgcSelectItemComponent | null

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:671

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:697

Parameters

  • value: string

Returns IgcSelectItemComponent | null

setCustomValidity

Section titled "setCustomValidity"

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

Sets a custom message. Invalid while message is not empty.

 
setCustomValidity(message: string): void

Defined in src/internals/mixins/forms/types.ts:120

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/internals/mixins/combo-box.ts:64

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/internals/mixins/combo-box.ts:74

Returns Promise<boolean>