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 dir disabled inputmode invalid label max maxlength min minlength name outlined pattern placeholder readonly required size step tabIndex type value styles tagName

Methods

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

Constructors

constructor

Properties

autocomplete

autocomplete: string

The autocomplete attribute of the control.

Attr

autofocus

autofocus: boolean

The autofocus attribute of the control.

Attr

dir

dir: Direction = 'auto'

The direction attribute of the control.

Attr

disabled

disabled: boolean = false

Makes the control a disabled field.

Attr

inputmode

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

The input mode attribute of the control.

Attr

invalid

invalid: boolean = false

Controls 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 maxlength attribute of the control.

Attr

min

min: string | number

The min attribute of the control.

Attr

minlength

minlength: number

The minlength attribute of 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 = false

Makes the control a required field.

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'

Methods

blur

checkValidity

connectedCallback

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

  • Checks for validity of the control and shows the browser message if it's invalid.

    Returns boolean

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

themeAdopted

  • Parameters

    • controller: ThemeController

    Returns void