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.

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

Properties

Accessors

Methods

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

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

Accessors

form

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

Methods

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: RangeTextSelectMode = 'preserve'

    Returns void

setSelectionRange

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

  • Sets the text selection range of the control

    Parameters

    • start: number
    • end: number
    • direction: SelectionRangeDirection = 'none'

    Returns void

stepDown

stepUp