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

  • IgcInputBaseComponent
    • IgcInputComponent

Constructors

constructor

Properties

autocomplete autofocus disabled inputmode invalid label max maxLength min minLength name outlined pattern placeholder readOnly required size step tabIndex type value styles tagName

Accessors

form maxlength minlength readonly validationMessage validity willValidate

Methods

blur checkValidity connectedCallback disconnectedCallback emitEvent focus reportValidity select setCustomValidity setRangeText setSelectionRange stepDown stepUp

Constructors

constructor

Properties

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: "search" | "numeric" | "none" | "url" | "decimal" | "email" | "tel" | "txt"

The input mode attribute of the control.

Attr

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

min

min: string | number

The min attribute of the control.

Attr

minLength

minLength: number

The minimum string length required by the control.

Attr

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

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.

step

step: number

The step attribute of the control.

Attr

tabIndex

tabIndex: number = 0

type

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

The type attribute of the control.

Attr

value

value: string = ''

The value of the control.

Attr

Static styles

styles: CSSResult = styles

Static Readonly tagName

tagName: "igc-input" = 'igc-input'

Accessors

form

maxlength

minlength

readonly

  • get readonly(): boolean

  • Makes the control a readonly field.

    Attr

    Deprecated

    • since v4.4.0 Use the readOnly property instead.

    Returns boolean

  • set readonly(value: boolean): void

  • 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

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

Methods

blur

checkValidity

connectedCallback

disconnectedCallback

emitEvent

  • Type Parameters

    • K extends keyof IgcInputEventMap

    • D extends string | void

    Parameters

    • type: K
    • Optional eventInitDict: CustomEventInit<D>

    Returns boolean

focus

  • Sets focus on the control.

    Parameters

    • Optional options: FocusOptions

    Returns void

reportValidity

select

setCustomValidity

  • 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

  • Replaces the selected text in the input.

    Parameters

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

    Returns void

setSelectionRange

  • Sets the text selection range of the control

    Parameters

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

    Returns void

stepDown

  • Decrements the numeric value of the input by one or more steps.

    Parameters

    • Optional n: number

    Returns void

stepUp

  • Increments the numeric value of the input by one or more steps.

    Parameters

    • Optional n: number

    Returns void