Ignite UI for Web Components

All
  • Public
  • Public/Protected
  • All

Class IgcInputComponent

Element

igc-input

Slot

prefix - Renders content before the input.

Slot

suffix - Renders content after input.

Slot

helper-text - Renders content below the input.

Fires

igcInput - Emitted when the control input receives user input.

Fires

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

Fires

igcFocus - Emitted when the control gains focus.

Fires

igcBlur - Emitted when the control loses focus.

Csspart

container - The main wrapper that holds all main input elements.

Csspart

input - The native input element.

Csspart

label - The native label element.

Csspart

prefix - The prefix wrapper.

Csspart

suffix - The suffix wrapper.

Csspart

helper-text - The helper text wrapper.

Hierarchy

Hierarchy

  • IgcInputBaseComponent
    • IgcInputComponent

Other

lifecycle

Other

autocomplete

autocomplete: string

The autocomplete attribute of the control.

Attr

autofocus

autofocus: boolean

The autofocus attribute of the control.

Attr

disabled

disabled: boolean

The disabled state of the component

Attr

[disabled=false]

inputMode

inputMode: string

The input mode attribute of the control. See relevant MDN article

Attr

inputmode

invalid

invalid: boolean

Control the validity of the control.

Attr

label

label: string

The label for the control.

Attr

max

max: string | number

The max attribute of the control.

Attr

maxLength

maxLength: number

The maximum string length of the control.

Attr

maxlength

min

min: string | number

The min attribute of the control.

Attr

minLength

minLength: number

The minimum string length required by the control.

Attr

minlength

name

name: string

The name attribute of the control.

Attr

outlined

outlined: boolean = false

Whether the control will have outlined appearance.

Attr

pattern

pattern: string

The pattern attribute of the control.

Attr

placeholder

placeholder: string

The placeholder attribute of the control.

Attr

readOnly

readOnly: boolean = false

Makes the control a readonly field.

Attr

readonly

required

required: boolean

Makes the control a required field in a form context.

Attr

size

size: "small" | "medium" | "large"

Determines the size of the component.

Attr

Deprecated

since v4.5.0. Use the --ig-size CSS custom property instead.

step

step: number

The step attribute of the control.

Attr

InternaltabIndex

tabIndex: number = 0

type

type:
    | "number"
    | "search"
    | "url"
    | "text"
    | "email"
    | "tel"
    | "password" = 'text'

The type attribute of the control.

Attr

validateOnly

validateOnly: boolean = false

Enables validation rules to be evaluated without restricting user input. This applies to the maxLength property for string-type inputs or allows spin buttons to exceed the predefined min/max limits for number-type inputs.

Attr

validate-only

form

inputmode

  • set inputmode(value): void

  • The input mode attribute of the control.

    Deprecated

    since v4.10.0. Use inputMode property instead.

    Parameters

    • value: string

    Returns void

maxlength

  • set maxlength(value): void

  • The maxlength attribute of the control.

    Deprecated

    since v4.4.0. Use the maxLength property instead.

    Parameters

    • value: number

    Returns void

minlength

  • set minlength(value): void

  • The minlength attribute of the control.

    Deprecated

    since v4.4.0. Use the minLength property instead.

    Parameters

    • value: number

    Returns void

readonly

  • set readonly(value): void

  • Makes the control a readonly field.

    Deprecated

    since v4.4.0. Use the readOnly property instead.

    Parameters

    • value: boolean

    Returns void

validationMessage

validity

  • 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

value

willValidate

  • 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

blur

checkValidity

focus

reportValidity

select

setCustomValidity

  • setCustomValidity(message): void

  • 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

setRangeText

  • setRangeText(replacement, start, end, selectMode?): void

  • Replaces the selected text in the input.

    Parameters

    • replacement: string
    • start: number
    • end: number
    • selectMode:
          | "end"
          | "start"
          | "select"
          | "preserve" = 'preserve'

    Returns void

setSelectionRange

  • setSelectionRange(start, end, direction?): void

  • Sets the text selection range of the control

    Parameters

    • start: number
    • end: number
    • direction: "none" | "forward" | "backward" = 'none'

    Returns void

stepDown

stepUp

lifecycle

disconnectedCallback

  • disconnectedCallback(): void

  • Invoked when the component is removed from the document's DOM.

    This callback is the main signal to the element that it may no longer be used. disconnectedCallback() should ensure that nothing is holding a reference to the element (such as event listeners added to nodes external to the element), so that it is free to be garbage collected.

    disconnectedCallback() {
      super.disconnectedCallback();
      window.removeEventListener('keydown', this._handleKeydown);
    }

    An element may be re-connected after being disconnected.

    Returns void