Ignite UI for Web Components

All
  • Public
  • Public/Protected
  • All

Class IgcRadioComponent

Element

igc-radio

Slot

  • The radio label.

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

base - The radio control base wrapper.

Csspart

control - The radio control.

Csspart

label - The radio control label.

Hierarchy

Hierarchy

  • FormRequiredInterface<this> & FormAssociatedElementInterface<this> & EventEmitterInterface<IgcRadioEventMap, this> & LitElement<this>
    • IgcRadioComponent

Other

lifecycle

Other

disabled

disabled: boolean

The disabled state of the component

Attr

[disabled=false]

invalid

invalid: boolean

Control the validity of the control.

Attr

labelPosition

labelPosition: "after" | "before" = 'after'

The label position of the radio control.

Attr

label-position

name

name: string

The name attribute of the control.

Attr

required

required: boolean

Makes the control a required field in a form context.

Attr

Static ReadonlytagName

tagName: "igc-radio" = 'igc-radio'

Returns the HTML-uppercased qualified name.

MDN Reference

checked

form

  • get form(): null | HTMLFormElement

  • Returns the HTMLFormElement associated with this element.

    Returns null | HTMLFormElement

validationMessage

  • get validationMessage(): string

  • A string containing the validation message of this element.

    Returns string

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

blur

  • blur(): void

  • Removes focus from the radio control.

    Returns void

checkValidity

  • checkValidity(): boolean

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

    Returns boolean

click

  • click(): void

  • Simulates a click on the radio control.

    Returns void

focus

  • focus(options?): void

  • Sets focus on the radio control.

    Parameters

    • options: FocusOptions

    Returns void

reportValidity

  • reportValidity(): boolean

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

    Returns boolean

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

lifecycle

connectedCallback

  • connectedCallback(): void

  • Invoked when the component is added to the document's DOM.

    In connectedCallback() you should setup tasks that should only occur when the element is connected to the document. The most common of these is adding event listeners to nodes external to the element, like a keydown event handler added to the window.

    connectedCallback() {
      super.connectedCallback();
      addEventListener('keydown', this._handleKeydown);
    }

    Typically, anything done in connectedCallback() should be undone when the element is disconnected, in disconnectedCallback().

    Returns void