RadioButton JAVASCRIPT UI Component API

RadioButton Javascript API

Class

RadioButton

RadioButton

The Radio Button component lets you add a radio button and assign it to a radio group. Users can select only one radio button at a time within a radio group

Selector

smart-radio-button

Properties

AanimationSets or retrieves the current animation mode. When this property is set to 'none', all animations are disabled for the associated element. Use this property to enable, disable, or adjust the animation behavior as needed.
CcheckedSets or retrieves the current checked state of the control. This property allows you to specify whether the control is checked, unchecked, or—if supported—set to an indeterminate state. You can use it to update the visual state of elements like checkboxes or radio buttons, or to query their current status in your application logic.
CcheckModeSets or retrieves the specific part of the element responsible for toggling its state (such as showing or hiding content). This attribute identifies which internal component or sub-element responds to toggle actions, enabling interactive behavior.
CclickModeSpecifies how the radio button responds to user click events, determining whether the button is selected, toggled, or triggers a specific action when clicked.
DdisabledControls whether the ratio button is displayed and functional. When enabled, users can interact with the ratio button; when disabled, the button is hidden or inactive.
GgroupNameSets or retrieves the name of the group to which the widget belongs. This property allows you to organize multiple widgets into logical groups, enabling group-based behavior or styling. When setting this property, the widget is associated with the specified group; when getting, it returns the current group name assigned to the widget.
IinnerHTMLGets or sets the HTML content contained within the widget. Setting this property updates the widget’s inner HTML structure, while getting it returns the current HTML markup inside the widget. Use this property to dynamically modify or retrieve the widget’s content.
UunlockKeyDefines or retrieves the unlockKey property, which serves as the credential required to unlock access to the product.
LlocaleSets or retrieves the current language code (e.g., "en", "fr", "es") used by the component or application. This property works together with the messages property to determine which set of localized messages or translations should be displayed to the user. Adjusting the language value dynamically updates the displayed content based on the corresponding messages for the selected language.
LlocalizeFormatFunctionCallback function associated with the localization module, typically invoked to handle events or updates related to language changes, text translation, or region-specific content within the application.
MmessagesDefines an object that maps different password strength states to their corresponding descriptive string values. This allows you to customize the messages shown to users based on the evaluated strength of their password (e.g., "weak," "medium," "strong").
NnameGets the current name of the widget or assigns a new name to the widget. The name serves as a unique identifier, which can be used for tracking, referencing, or interacting with the widget programmatically.
RreadonlyWhen the custom element is set to readonly, its value cannot be modified by user input or interaction. All form controls within the element will display their current values but will be non-editable, preventing users from changing, adding, or deleting content. However, the element may still support programmatic updates via JavaScript.
RrightToLeftSpecifies or retrieves a Boolean value that determines whether the element’s content is aligned to accommodate right-to-left (RTL) languages, such as Arabic or Hebrew. When set to true, the element’s layout and text flow are adjusted to support RTL locales and fonts.
TthemeSpecifies the visual theme to be applied. The selected theme controls the overall appearance, including colors, fonts, and styling of the element.
UunfocusableWhen set to true, this property prevents the element from receiving keyboard focus, making it impossible for users to navigate to the element using the Tab key or other focus methods.
VvalueSets a new value for the widget or retrieves its current value, depending on the context in which the method is called. This allows you to programmatically update the widget's content or access the value entered or selected by the user.

Events

CchangeThis event is triggered whenever the widget’s checked state changes, such as when a user selects (checks) or deselects (unchecks) the widget. It allows you to execute custom logic in response to the user interacting with the widget’s selection control.
CcheckValueThis event is triggered whenever the widget's checked state changes from unchecked to checked, indicating that the user has selected or activated the widget. This event is typically used to execute custom logic in response to the widget being checked, such as updating the UI, submitting data, or enabling related features.
UuncheckValueThis event is triggered whenever the user deselects or unchecks the widget, indicating a change in its state from checked to unchecked. It allows developers to respond to the action of unchecking, such as updating the user interface or processing form data.

Properties

animation"none" | "simple" | "advanced"

Sets or retrieves the current animation mode. When this property is set to 'none', all animations are disabled for the associated element. Use this property to enable, disable, or adjust the animation behavior as needed.

Allowed Values

  • "none" - animation is disabled
  • "simple" - ripple animation is disabled
  • "advanced" - all animations are enabled

Default value

"advanced"

Example

Set the animation property. 

 <smart-radio-button animation='none'></smart-radio-button>

Set the animation property by using the HTML Element's instance. 

 const radiobutton = document.querySelector('smart-radio-button');
 radiobutton.animation = 'simple';

Get the animation property. 

 const radiobutton = document.querySelector('smart-radio-button');
 let animation = radiobutton.animation;

checkedboolean

Sets or retrieves the current checked state of the control. This property allows you to specify whether the control is checked, unchecked, or—if supported—set to an indeterminate state. You can use it to update the visual state of elements like checkboxes or radio buttons, or to query their current status in your application logic.

Default value

false

Example

Set the checked property. 

 <smart-radio-button checked></smart-radio-button>

Set the checked property by using the HTML Element's instance. 

 const radiobutton = document.querySelector('smart-radio-button');
 radiobutton.checked = false;

Get the checked property. 

 const radiobutton = document.querySelector('smart-radio-button');
 let checked = radiobutton.checked;

checkMode"both" | "input" | "label"

Sets or retrieves the specific part of the element responsible for toggling its state (such as showing or hiding content). This attribute identifies which internal component or sub-element responds to toggle actions, enabling interactive behavior.

Default value

"both"

Example

Set the checkMode property. 

 <smart-radio-button check-mode='input'></smart-radio-button>

Set the checkMode property by using the HTML Element's instance. 

 const radiobutton = document.querySelector('smart-radio-button');
 radiobutton.checkMode = 'label';

Get the checkMode property. 

 const radiobutton = document.querySelector('smart-radio-button');
 let checkMode = radiobutton.checkMode;

clickMode"hover" | "press" | "release" | "pressAndRelease"

Specifies how the radio button responds to user click events, determining whether the button is selected, toggled, or triggers a specific action when clicked.

Default value

"release"

Example

Set the clickMode property. 

 <smart-radio-button click-mode='press'></smart-radio-button>

Set the clickMode property by using the HTML Element's instance. 

 const radiobutton = document.querySelector('smart-radio-button');
 radiobutton.clickMode = 'pressAndRelease';

Get the clickMode property. 

 const radiobutton = document.querySelector('smart-radio-button');
 let clickMode = radiobutton.clickMode;

disabledboolean

Controls whether the ratio button is displayed and functional. When enabled, users can interact with the ratio button; when disabled, the button is hidden or inactive.

Default value

false

Example

Set the disabled property. 

 <smart-radio-button disabled></smart-radio-button>

Set the disabled property by using the HTML Element's instance. 

 const radiobutton = document.querySelector('smart-radio-button');
 radiobutton.disabled = false;

Get the disabled property. 

 const radiobutton = document.querySelector('smart-radio-button');
 let disabled = radiobutton.disabled;

groupNamestring

Sets or retrieves the name of the group to which the widget belongs. This property allows you to organize multiple widgets into logical groups, enabling group-based behavior or styling. When setting this property, the widget is associated with the specified group; when getting, it returns the current group name assigned to the widget.

Default value

""""

Example

Set the groupName property. 

 <smart-radio-button group-name='Group'></smart-radio-button>

Set the groupName property by using the HTML Element's instance. 

 const radiobutton = document.querySelector('smart-radio-button');
 radiobutton.groupName = 'New Group';

Get the groupName property. 

 const radiobutton = document.querySelector('smart-radio-button');
 let groupName = radiobutton.groupName;

innerHTMLstring

Gets or sets the HTML content contained within the widget. Setting this property updates the widget’s inner HTML structure, while getting it returns the current HTML markup inside the widget. Use this property to dynamically modify or retrieve the widget’s content.

Default value

""""

Example

Set the innerHTML property. 

 <smart-radio-button inner-h-t-m-l='Radio Button Label'></smart-radio-button>

Set the innerHTML property by using the HTML Element's instance. 

 const radiobutton = document.querySelector('smart-radio-button');
 radiobutton.innerHTML = 'New Radio Button Label';

Get the innerHTML property. 

 const radiobutton = document.querySelector('smart-radio-button');
 let innerHTML = radiobutton.innerHTML;

unlockKeystring

Defines or retrieves the unlockKey property, which serves as the credential required to unlock access to the product.

Default value

""

Example

Set the unlockKey property. 

 <smart-radio-button unlock-key=''></smart-radio-button>

Set the unlockKey property by using the HTML Element's instance. 

 const radiobutton = document.querySelector('smart-radio-button');
 radiobutton.unlockKey = '1111-2222-3333-4444-5555';

Get the unlockKey property. 

 const radiobutton = document.querySelector('smart-radio-button');
 let unlockKey = radiobutton.unlockKey;

localestring

Sets or retrieves the current language code (e.g., "en", "fr", "es") used by the component or application. This property works together with the messages property to determine which set of localized messages or translations should be displayed to the user. Adjusting the language value dynamically updates the displayed content based on the corresponding messages for the selected language.

Default value

"en"

Example

Set the locale property. 

 <smart-radio-button locale='de'></smart-radio-button>

Set the locale property by using the HTML Element's instance. 

 const radiobutton = document.querySelector('smart-radio-button');
 radiobutton.locale = 'fr';

Get the locale property. 

 const radiobutton = document.querySelector('smart-radio-button');
 let locale = radiobutton.locale;

localizeFormatFunctionfunction | null

Callback function associated with the localization module, typically invoked to handle events or updates related to language changes, text translation, or region-specific content within the application.

Example

Set the localizeFormatFunction property. 

 <smart-radio-button localize-format-function='function(){return '...'}'></smart-radio-button>

Set the localizeFormatFunction property by using the HTML Element's instance. 

 const radiobutton = document.querySelector('smart-radio-button');
 radiobutton.localizeFormatFunction = function(){return '...'};

Get the localizeFormatFunction property. 

 const radiobutton = document.querySelector('smart-radio-button');
 let localizeFormatFunction = radiobutton.localizeFormatFunction;

messagesobject

Defines an object that maps different password strength states to their corresponding descriptive string values. This allows you to customize the messages shown to users based on the evaluated strength of their password (e.g., "weak," "medium," "strong").

Default value




"en": {

"propertyUnknownType": "'{{name}}' property is with undefined 'type' member!",

"propertyInvalidValue": "Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!",

"propertyInvalidValueType": "Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!",

"elementNotInDOM": "Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.",

"moduleUndefined": "Module is undefined.",

"missingReference": "{{elementType}}: Missing reference to {{files}}.",

"htmlTemplateNotSuported": "{{elementType}}: Browser doesn't support HTMLTemplate elements.",

"invalidTemplate": "{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM."

}

Example

Set the messages property. 

 <smart-radio-button messages='{"de":{"propertyUnknownType":"Die Eigenschaft '{{name}}' hat ein nicht definiertes 'type'-Member!","propertyInvalidValue":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualValue}}, Erwarteter Wert: {{value}}!","propertyInvalidValueType":"Ungultiger Eigenschaftswert '{{name}}'! Aktueller Wert: {{actualType}}, Erwarteter Wert: {{type}}!","elementNotInDOM":"Element existiert nicht in DOM! Bitte fugen Sie das Element zum DOM hinzu, bevor Sie eine Methode aufrufen.","moduleUndefined":"Modul ist nicht definiert.","missingReference":"{{elementType}}: Fehlender Verweis auf {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser unterstutzt keine HTMLTemplate-Elemente.","invalidTemplate":"{{elementType}}: '{{property}}' Die Eigenschaft akzeptiert eine Zeichenfolge, die mit der ID eines HTMLTemplate-Elements aus dem DOM ubereinstimmen muss."}}'></smart-radio-button>

Set the messages property by using the HTML Element's instance. 

 const radiobutton = document.querySelector('smart-radio-button');
 radiobutton.messages = {"en":{"propertyUnknownType":"'{{name}}' property is with undefined 'type' member!","propertyInvalidValue":"Invalid '{{name}}' property value! Actual value: {{actualValue}}, Expected value: {{value}}!","propertyInvalidValueType":"Invalid '{{name}}' property value type! Actual type: {{actualType}}, Expected type: {{type}}!","elementNotInDOM":"Element does not exist in DOM! Please, add the element to the DOM, before invoking a method.","moduleUndefined":"Module is undefined.","missingReference":"{{elementType}}: Missing reference to {{files}}.","htmlTemplateNotSuported":"{{elementType}}: Browser doesn't support HTMLTemplate elements.","invalidTemplate":"{{elementType}}: '{{property}}' property accepts a string that must match the id of an HTMLTemplate element from the DOM."}};

Get the messages property. 

 const radiobutton = document.querySelector('smart-radio-button');
 let messages = radiobutton.messages;

namestring

Gets the current name of the widget or assigns a new name to the widget. The name serves as a unique identifier, which can be used for tracking, referencing, or interacting with the widget programmatically.

Default value

""""

Example

Set the name property. 

 <smart-radio-button name='Name'></smart-radio-button>

Set the name property by using the HTML Element's instance. 

 const radiobutton = document.querySelector('smart-radio-button');
 radiobutton.name = 'New Name';

Get the name property. 

 const radiobutton = document.querySelector('smart-radio-button');
 let name = radiobutton.name;

readonlyboolean

When the custom element is set to readonly, its value cannot be modified by user input or interaction. All form controls within the element will display their current values but will be non-editable, preventing users from changing, adding, or deleting content. However, the element may still support programmatic updates via JavaScript.

Default value

false

Example

Set the readonly property. 

 <smart-radio-button readonly></smart-radio-button>

Set the readonly property by using the HTML Element's instance. 

 const radiobutton = document.querySelector('smart-radio-button');
 radiobutton.readonly = false;

Get the readonly property. 

 const radiobutton = document.querySelector('smart-radio-button');
 let readonly = radiobutton.readonly;

rightToLeftboolean

Specifies or retrieves a Boolean value that determines whether the element’s content is aligned to accommodate right-to-left (RTL) languages, such as Arabic or Hebrew. When set to true, the element’s layout and text flow are adjusted to support RTL locales and fonts.

Default value

false
Try a demo showcasing the rightToLeft property.

Example

Set the rightToLeft property. 

 <smart-radio-button right-to-left></smart-radio-button>

Set the rightToLeft property by using the HTML Element's instance. 

 const radiobutton = document.querySelector('smart-radio-button');
 radiobutton.rightToLeft = true;

Get the rightToLeft property. 

 const radiobutton = document.querySelector('smart-radio-button');
 let rightToLeft = radiobutton.rightToLeft;

themestring

Specifies the visual theme to be applied. The selected theme controls the overall appearance, including colors, fonts, and styling of the element.

Default value

""

Example

Set the theme property. 

 <smart-radio-button theme='blue'></smart-radio-button>

Set the theme property by using the HTML Element's instance. 

 const radiobutton = document.querySelector('smart-radio-button');
 radiobutton.theme = 'red';

Get the theme property. 

 const radiobutton = document.querySelector('smart-radio-button');
 let theme = radiobutton.theme;

unfocusableboolean

When set to true, this property prevents the element from receiving keyboard focus, making it impossible for users to navigate to the element using the Tab key or other focus methods.

Default value

false

Example

Set the unfocusable property. 

 <smart-radio-button unfocusable></smart-radio-button>

Set the unfocusable property by using the HTML Element's instance. 

 const radiobutton = document.querySelector('smart-radio-button');
 radiobutton.unfocusable = false;

Get the unfocusable property. 

 const radiobutton = document.querySelector('smart-radio-button');
 let unfocusable = radiobutton.unfocusable;

valuestring

Sets a new value for the widget or retrieves its current value, depending on the context in which the method is called. This allows you to programmatically update the widget's content or access the value entered or selected by the user.

Default value

""""

Example

Set the value property. 

 <smart-radio-button value='Value'></smart-radio-button>

Set the value property by using the HTML Element's instance. 

 const radiobutton = document.querySelector('smart-radio-button');
 radiobutton.value = 'New Value';

Get the value property. 

 const radiobutton = document.querySelector('smart-radio-button');
 let value = radiobutton.value;

Events

changeCustomEvent

This event is triggered whenever the widget’s checked state changes, such as when a user selects (checks) or deselects (unchecks) the widget. It allows you to execute custom logic in response to the user interacting with the widget’s selection control.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onChange

Arguments

evCustomEvent
ev.detailObject
ev.detail.value - A boolean value indicating the new state of the button ( checked or not ).
ev.detail.oldValue - A boolean value indicating the previous state of the button ( checked or not ).
ev.detail.changeType - A string flag indicating whether the change event was triggered via API or an event.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Try a demo showcasing the change event.

Example

Set up the event handler of change event. 

const radiobutton = document.querySelector('smart-radio-button');
radiobutton.addEventListener('change', function (event) {
    const detail = event.detail,
        value = detail.value,
        oldValue = detail.oldValue,
        changeType = detail.changeType;

	// event handling code goes here.
})

checkValueCustomEvent

This event is triggered whenever the widget's checked state changes from unchecked to checked, indicating that the user has selected or activated the widget. This event is typically used to execute custom logic in response to the widget being checked, such as updating the UI, submitting data, or enabling related features.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onCheckValue

Arguments

evCustomEvent
ev.detailObject
ev.detail.changeType - A string flag indicating whether the change event was triggered via API or an event.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of checkValue event. 

const radiobutton = document.querySelector('smart-radio-button');
radiobutton.addEventListener('checkValue', function (event) {
    const detail = event.detail,
        changeType = detail.changeType;

	// event handling code goes here.
})

uncheckValueCustomEvent

This event is triggered whenever the user deselects or unchecks the widget, indicating a change in its state from checked to unchecked. It allows developers to respond to the action of unchecking, such as updating the user interface or processing form data.

  • Bubbles Yes
  • Cancelable No
  • Interface CustomEvent
  • Event handler property onUncheckValue

Arguments

evCustomEvent
ev.detailObject
ev.detail.changeType - A string flag indicating whether the change event was triggered via API or an event.

Methods

isDefaultPrevented

Returns true if the event was prevented by any of its subscribers.

Returns

boolean true if the default action was prevented. Otherwise, returns false.

preventDefault

The preventDefault() method prevents the default action for a specified event. In this way, the source component suppresses the built-in behavior that follows the event.

stopPropagation

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.

Example

Set up the event handler of uncheckValue event. 

const radiobutton = document.querySelector('smart-radio-button');
radiobutton.addEventListener('uncheckValue', function (event) {
    const detail = event.detail,
        changeType = detail.changeType;

	// event handling code goes here.
})

CSS Variables

--smart-radio-button-default-sizevar()

Default value

"calc(1px + 1/2 * var(--smart-editor-height))"

Default size for the radio button.