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

Index

Constructors

Properties

Methods

Constructors

constructor

Properties

autocomplete

autocomplete: string

The autocomplete attribute of the control.

autofocus

autofocus: boolean

The autofocus attribute of the control.

dir

dir: Direction = 'auto'

The direction attribute of the control.

disabled

disabled: boolean = false

Makes the control a disabled field.

inputmode

inputmode: "search" | "numeric" | "none" | "url" | "decimal" | "email" | "tel" | "txt"

The input mode attribute of the control.

invalid

invalid: boolean = false

Controls the validity of the control.

label

label: string

The label for the control.

max

max: string | number

The max attribute of the control.

maxlength

maxlength: number

The maxlength attribute of the control.

min

min: string | number

The min attribute of the control.

minlength

minlength: number

The minlength attribute of the control.

name

name: string

The name attribute of the control.

outlined

outlined: boolean = false

pattern

pattern: string

The pattern attribute of the control.

placeholder

placeholder: string

The placeholder attribute of the control.

readonly

readonly: boolean = false

Makes the control a readonly field.

required

required: boolean = false

Makes the control a required field.

size

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

Determines the size of the component.

step

step: number

The step attribute of the control.

type

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

The type attribute of the control.

value

value: string = ''

Static styles

styles: CSSResult = styles

Static Readonly tagName

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

Methods

blur

  • blur(): void

connectedCallback

  • connectedCallback(): void

emitEvent

  • emitEvent<K, D>(type: K, eventInitDict?: CustomEventInit<D>): boolean

  • Type Parameters

    • K extends keyof IgcInputEventMap

    • D extends string | void

    Parameters

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

    Returns boolean

focus

  • focus(options?: FocusOptions): void

reportValidity

  • reportValidity(): boolean

select

  • select(): void

setCustomValidity

  • setCustomValidity(message: string): 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: string, start: number, end: number, selectMode?: "end" | "start" | "select" | "preserve"): 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: number, end: number, direction?: "none" | "forward" | "backward"): void

  • Sets the text selection range of the control

    Parameters

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

    Returns void

stepDown

  • stepDown(n?: number): void

stepUp

  • stepUp(n?: number): void

themeAdopted

  • themeAdopted(controller: ThemeController): void