Class IgcSelectComponent

Represents a control that provides a menu of options.

Element

igc-select

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.

Fires

igcFocus - Emitted when the select gains focus.

Fires

igcBlur - Emitted when the select loses focus.

Fires

igcChange - Emitted when the control's checked state changes.

Fires

igcOpening - Emitted just before the list of options is opened.

Fires

igcOpened - Emitted after the list of options is opened.

Fires

igcClosing - Emitter just before the list of options is closed.

Fires

igcClosed - Emitted after the list of options is closed.

Csspart

list - The list of options wrapper.

Csspart

input - The encapsulated igc-input.

Csspart

label - The encapsulated text label.

Csspart

prefix - The prefix wrapper.

Csspart

suffix - The suffix wrapper.

Csspart

toggle-icon - The toggle icon wrapper.

Csspart

helper-text - The helper text wrapper.

Hierarchy

Hierarchy

  • FormRequiredInterface<this> & FormAssociatedElementInterface<this> & EventEmitterInterface<IgcSelectEventMap, this> & IgcBaseComboBoxLikeComponent<this>
    • IgcSelectComponent

Constructors

Properties

autofocus: boolean

The autofocus attribute of the control.

Attr

disabled: boolean

The disabled state of the component

Attr

[disabled=false]

distance: number = 0

The distance of the select dropdown from its input.

Attr

emitEvent: (<K, D>(type, eventInitDict?) => boolean) & (<K, D>(event, eventInitDict?) => boolean)
invalid: boolean

Control the validity of the control.

Attr

keepOpenOnOutsideClick: boolean = false

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

Attr

keep-open-on-outside-click

keepOpenOnSelect: boolean = false

Whether the component dropdown should be kept open on selection.

Attr

keep-open-on-select

label: string

The label attribute of the control.

Attr

name: string

The name attribute of the control.

Attr

open: boolean = false

Sets the open state of the component.

Attr

outlined: boolean = false

The outlined attribute of the control.

Attr

placeholder: string

The placeholder attribute of the control.

Attr

placement: IgcPlacement = 'bottom-start'

The preferred placement of the select dropdown around its input.

Attr

required: boolean

Makes the control a required field in a form context.

Attr

scrollStrategy: "block" | "close" | "scroll" = 'scroll'

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

Attr

scroll-strategy

styles: CSSResult[] = ...
tagName: "igc-select" = 'igc-select'

Accessors

  • get form(): null | HTMLFormElement
  • Returns the HTMLFormElement associated with this element.

    Returns null | HTMLFormElement

  • get validationMessage(): string
  • A string containing the validation message of this element.

    Returns string

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

    Returns ValidityState

  • get willValidate(): boolean
  • A boolean value which returns true if the element is a submittable element that is a candidate for constraint validation.

    Returns boolean

Methods

  • Removes focus from the component.

    Returns void

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

    Returns boolean

  • Sets focus on the component.

    Parameters

    • Optional options: FocusOptions

    Returns void

  • Hides the component.

    Returns void

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

    Returns boolean

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

    Parameters

    • message: string

    Returns void

  • Shows the component.

    Returns void

  • Toggles the open state of the component.

    Returns void