Element
igc-input
Slots
prefix — Renders content before the input.
suffix — Renders content after input.
helper-text — Renders content below the input.
value-missing — Renders content when the required validation fails.
type-mismatch — Renders content when the a type url/email input pattern validation fails.
pattern-mismatch — Renders content when the pattern validation fails.
too-long — Renders content when the maxlength validation fails.
too-short — Renders content when the minlength validation fails.
range-overflow — Renders content when the max validation fails.
range-underflow — Renders content when the min validation fails.
step-mismatch — Renders content when the step validation fails.
custom-error — Renders content when setCustomValidity(message) is set.
invalid — Renders content when the component is in invalid state (validity.valid = false).
CSS Parts
container — The main wrapper that holds all main input elements.
input — The native input element.
label — The native label element.
prefix — The prefix wrapper.
suffix — The suffix wrapper.
helper-text — The helper text wrapper.

Constructors

Section titled "Constructors"

IgcInputComponent 

new IgcInputComponent(args: any[]): IgcInputComponent

Defined in src/components/common/mixins/constructor.ts:1

Returns IgcInputComponent

Properties

Section titled "Properties"

autocomplete

Section titled "autocomplete"

The autocomplete attribute of the control.

 
autocomplete: string

Defined in src/components/input/input.ts:231

autofocus

Section titled "autofocus"

The autofocus attribute of the control.

 
autofocus: boolean

Defined in src/components/input/input.ts:224

disabled

Section titled "disabled"

Inherited from: IgcInputBaseComponent

The disabled state of the component.

 
disabled: boolean

Defined in src/components/common/mixins/forms/types.ts:29

inputMode

Section titled "inputMode"

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

 
inputMode: string

Defined in src/components/input/input.ts:133

invalid

Section titled "invalid"

Inherited from: IgcInputBaseComponent

Sets the control into invalid state (visual state only).

 
invalid: boolean

Defined in src/components/common/mixins/forms/types.ts:36

label

Section titled "label"

Inherited from: IgcInputBaseComponent

The label for the control.

 
label: string

Defined in src/components/input/input-base.ts:68

name

Section titled "name"

Inherited from: IgcInputBaseComponent

The name attribute of the control.

 
name: string

Defined in src/components/common/mixins/forms/types.ts:42

outlined

Section titled "outlined"

Inherited from: IgcInputBaseComponent

Whether the control will have outlined appearance.

 
outlined: boolean = false

Defined in src/components/input/input-base.ts:54

placeholder

Section titled "placeholder"

Inherited from: IgcInputBaseComponent

The placeholder attribute of the control.

 
placeholder: string

Defined in src/components/input/input-base.ts:61

readOnly

Section titled "readOnly"

Makes the control a readonly field.

 
readOnly: boolean = false

Defined in src/components/input/input.ts:125

type

Section titled "type"

The type attribute of the control.

 
type: InputType = 'text'

Defined in src/components/input/input.ts:116

validateOnly

Section titled "validateOnly"

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.

 
validateOnly: boolean = false

Defined in src/components/input/input.ts:241

styles

Section titled "styles" 
styles: CSSResult[]

Defined in src/components/input/input.ts:68

tagName

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

Defined in src/components/input/input.ts:67

Accessors

Section titled "Accessors"

defaultValue

Section titled "defaultValue"

Inherited from: IgcInputBaseComponent 

get defaultValue(): unknown

Defined in src/components/common/mixins/forms/types.ts:163

Returns unknown

The initial value of the component.

 
set defaultValue(value: unknown): void

Defined in src/components/common/mixins/forms/types.ts:162

Parameters

  • value: unknown

Returns void

form

Section titled "form"

Inherited from: IgcInputBaseComponent

Returns the HTMLFormElement associated with this element.

 
get form(): HTMLFormElement | null

Defined in src/components/common/mixins/forms/types.ts:45

Returns HTMLFormElement | null

max

Section titled "max" 
get max(): number | undefined

Defined in src/components/input/input.ts:201

Returns number | undefined

The max attribute of the control.

 
set max(value: number | undefined): void

Defined in src/components/input/input.ts:196

Parameters

  • value: number | undefined

Returns void

maxLength

Section titled "maxLength" 
get maxLength(): number | undefined

Defined in src/components/input/input.ts:173

Returns number | undefined

The maximum string length of the control.

 
set maxLength(value: number | undefined): void

Defined in src/components/input/input.ts:168

Parameters

  • value: number | undefined

Returns void

min

Section titled "min" 
get min(): number | undefined

Defined in src/components/input/input.ts:187

Returns number | undefined

The min attribute of the control.

 
set min(value: number | undefined): void

Defined in src/components/input/input.ts:182

Parameters

  • value: number | undefined

Returns void

minLength

Section titled "minLength" 
get minLength(): number | undefined

Defined in src/components/input/input.ts:159

Returns number | undefined

The minimum string length required by the control.

 
set minLength(value: number | undefined): void

Defined in src/components/input/input.ts:154

Parameters

  • value: number | undefined

Returns void

pattern

Section titled "pattern" 
get pattern(): string | undefined

Defined in src/components/input/input.ts:145

Returns string | undefined

The pattern attribute of the control.

 
set pattern(value: string | undefined): void

Defined in src/components/input/input.ts:140

Parameters

  • value: string | undefined

Returns void

required

Section titled "required"

Inherited from: IgcInputBaseComponent 

get required(): boolean

Defined in src/components/common/mixins/forms/types.ts:181

Returns boolean

When set, makes the component a required field for validation.

 
set required(value: boolean): void

Defined in src/components/common/mixins/forms/types.ts:180

Parameters

  • value: boolean

Returns void

step

Section titled "step" 
get step(): number | undefined

Defined in src/components/input/input.ts:215

Returns number | undefined

The step attribute of the control.

 
set step(value: number | undefined): void

Defined in src/components/input/input.ts:210

Parameters

  • value: number | undefined

Returns void

validationMessage

Section titled "validationMessage"

Inherited from: IgcInputBaseComponent

A string containing the validation message of this element.

 
get validationMessage(): string

Defined in src/components/common/mixins/forms/types.ts:54

Returns string

validity

Section titled "validity"

Inherited from: IgcInputBaseComponent

Returns a ValidityState object which represents the different validity states the element can be in, with respect to constraint validation.

 
get validity(): ValidityState

Defined in src/components/common/mixins/forms/types.ts:51

Returns ValidityState

value

Section titled "value"

The value attribute of the control.

 
get value(): string

Defined in src/components/input/input.ts:106

Returns string

The value of the control.

 
set value(value: string): void

Defined in src/components/input/input.ts:102

Parameters

  • value: string

Returns void

willValidate

Section titled "willValidate"

Inherited from: IgcInputBaseComponent

A boolean value which returns true if the element is a submittable element that is a candidate for constraint validation.

 
get willValidate(): boolean

Defined in src/components/common/mixins/forms/types.ts:60

Returns boolean

Methods

Section titled "Methods"

addEventListener

Section titled "addEventListener"

Inherited from: IgcInputBaseComponent 

addEventListener(type: K, listener: object, options: boolean | AddEventListenerOptions): void

Defined in src/components/common/mixins/event-emitter.ts:7

Parameters

  • type: K
  • listener: object
  • options: boolean | AddEventListenerOptions

Returns void

blur

Section titled "blur"

Inherited from: IgcInputBaseComponent

Removes focus from the control.

 
blur(): void

Defined in src/components/input/input-base.ts:100

Returns void

checkValidity

Section titled "checkValidity"

Inherited from: IgcInputBaseComponent

Checks for validity of the control and emits the invalid event if it invalid.

 
checkValidity(): boolean

Defined in src/components/common/mixins/forms/types.ts:146

Returns boolean

emitEvent

Section titled "emitEvent"

Inherited from: IgcInputBaseComponent 

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

Defined in src/components/common/mixins/event-emitter.ts:30

Parameters

  • type: K
  • eventInitDict: CustomEventInit<D>

Returns boolean

focus

Section titled "focus"

Inherited from: IgcInputBaseComponent

Sets focus on the control.

 
focus(options: FocusOptions): void

Defined in src/components/input/input-base.ts:94

Parameters

  • options: FocusOptions

Returns void

removeEventListener

Section titled "removeEventListener"

Inherited from: IgcInputBaseComponent 

removeEventListener(type: K, listener: object, options: boolean | EventListenerOptions): void

Defined in src/components/common/mixins/event-emitter.ts:17

Parameters

  • type: K
  • listener: object
  • options: boolean | EventListenerOptions

Returns void

reportValidity

Section titled "reportValidity"

Inherited from: IgcInputBaseComponent

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

 
reportValidity(): boolean

Defined in src/components/common/mixins/forms/types.ts:149

Returns boolean

select

Section titled "select"

Inherited from: IgcInputBaseComponent

Selects all the text inside the input.

 
select(): void

Defined in src/components/input/input-base.ts:88

Returns void

setCustomValidity

Section titled "setCustomValidity"

Inherited from: IgcInputBaseComponent

Sets a custom validation message for the control. As long as message is not empty, the control is considered invalid.

 
setCustomValidity(message: string): void

Defined in src/components/common/mixins/forms/types.ts:155

Parameters

  • message: string

Returns void

setRangeText

Section titled "setRangeText"

Replaces the selected text in the input.

 
setRangeText(replacement: string, start: number, end: number, selectMode: RangeTextSelectMode): void

Defined in src/components/input/input.ts:245

Parameters

Returns void

setSelectionRange

Section titled "setSelectionRange"

Sets the text selection range of the control

 
setSelectionRange(start: number, end: number, direction: SelectionRangeDirection): void

Defined in src/components/input/input.ts:257

Parameters

Returns void

stepDown

Section titled "stepDown"

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

 
stepDown(n: number): void

Defined in src/components/input/input.ts:272

Parameters

  • n: number

Returns void

stepUp

Section titled "stepUp"

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

 
stepUp(n: number): void

Defined in src/components/input/input.ts:266

Parameters

  • n: number

Returns void

register

Section titled "register" 
register(): void

Defined in src/components/input/input.ts:71

Returns void

Events

Section titled "Events"

igcChange

Section titled "igcChange" 
igcChange: CustomEvent<string>

Defined in src/components/input/input-base.ts:20

igcInput

Section titled "igcInput" 
igcInput: CustomEvent<string>

Defined in src/components/input/input-base.ts:18