TComponents. Radio

new Radio(parent, props)

Additional callbacks can be added with the onChange method. This class focuses on the specific properties of the Radio component. Since it inherits from Accessor_A, all basic properties (e.g., height, width) are available but documented in the Accessor_A part.

Parameters:
NameTypeDescription
parentHTMLElement

HTML element that is going to be the parent of the component

propsTComponents.RadioProps

Properties to initialize the Radio component

Source
Example
const radio = new TComponents.Radio(document.querySelector('.radio-container'), {
  position: 'absolute',
  zIndex: 1000,
  optionItems: 'Option 1|value1;Option 2|value2;Option 3|value3',
  selectedIndex: 0,
});

// Render the component
radio.render();

Extends

Members

onChange :function

Sets the onChange event handler. The handler can either be a string representing a function to be executed or a function itself.

  1. If you are using an arrow function, like ()=>{}, the this property of the scope may not refer to the radio object.
  2. If you are using string assignment to define code execution, the string should contain only the body of the code (executable statements), not a complete function declaration. Therefore, including function keywords like function or async function is incorrect.
  • Correct (Statements Only): xx.onChange = "console.log('Action done.');"
  • Incorrect (Function Declaration): xx.onChange = "function() { console.log('Action done.'); }"
Type:
  • function
Source
Examples
const radio = new TComponents.Radio(document.querySelector('.radio-container'), {
  position: 'absolute',
  zIndex: 1000,
  optionItems: 'Option 1|value1;Option 2|value2;Option 3|value3',
  selectedIndex: 0,
});

radio.render();

// Example 1: Using a string as the handler:
radio.onChange = "console.log('state changed', this.selectedIndex);";
// Example 2: Using a arrow function as the handler:
// Note that the `this` context will not refer to the radio object
radio.onChange = () => { console.log('state changed', radio.selectedIndex); };
// Example 3: Using a common function as the handler:
radio.onChange = async function() {
  console.log('state changed', this.selectedIndex);
};

optionItems :string

Sets the option items from a formatted string.

Type:
  • string
Source
Example
const radio = new TComponents.Radio(document.querySelector('.radio-container'), {
  position: 'absolute',
  zIndex: 1000,
  optionItems: 'Option 1|value1;Option 2|value2;Option 3|value3',
  selectedIndex: 0,
});

// Render the component
radio.render();

radio.optionItems = "Option 4|value4;Option 5|value5;Option 6|value6";

selectedIndex :number

sets the index of the currently selected option.

Type:
  • number
Source
Example
const radio = new TComponents.Radio(document.querySelector('.radio-container'), {
  position: 'absolute',
  zIndex: 1000,
  optionItems: 'Option 1|value1;Option 2|value2;Option 3|value3',
  selectedIndex: 0,
});

// Render the component
radio.render();

radio.selectedIndex = 0;

text :string

Sets the text of the selected radio option.

Type:
  • string
Source
Example
const radio = new TComponents.Radio(document.querySelector('.radio-container'), {
  position: 'absolute',
  zIndex: 1000,
  optionItems: 'Option 1|value1;Option 2|value2;Option 3|value3',
  selectedIndex: 0,
});

// Render the component
radio.render();

radio.text = 'value2';

value :string

Sets the value of the selected radio option.

Type:
  • string
Source
Example
const radio = new TComponents.Radio(document.querySelector('.radio-container'), {
  position: 'absolute',
  zIndex: 1000,
  optionItems: 'Option 1|value1;Option 2|value2;Option 3|value3',
  selectedIndex: 0,
});

// Render the component
radio.render();

radio.value = 'value2';

Methods

(protected) defaultProps() → {TComponents.RadioProps}

Returns the default values of class properties (excluding parent properties).

Overrides
Source
Returns:
Type: 
TComponents.RadioProps

(async) defaultProps() → {Promise.<void>}

Initializes the radio component.

Overrides
Source
Returns:
Type: 
Promise.<void>

(protected) groupComponents() → {array}

Maps the internal components.

Source
Returns:

The mapped components

Type: 
array

mapComponents() → {object}

Returns an object containing the components mapped to their identifiers. As one of the methods of component lifecycle, we do not recommend that users call this function manually.

Overrides
Source
Returns:

An object mapping identifiers to components.

Type: 
object

markup() → {string}

Generates the markup for the radio component.

Overrides
Source
Returns:

HTML markup string

Type: 
string

(async) onRender() → {Promise.<void>}

Renders the radio component.

Overrides
Source
Throws:

Throws an error if rendering fails.

Type
Error
Returns:
Type: 
Promise.<void>

(static) loadCssClassFromString(css) → {void}

Add css properties to the component

Parameters:
NameTypeDescription
cssstring

The css string to be loaded into style tag

Source
Returns:
Type: 
void
Example
TComponents.Radio.loadCssClassFromString(`
.tc-radio {
  height: inherit;
 }`
);