Overview

Smart.RadioButton represents a radio button that offers the functionality to be checked or not(depending on wheather there's another radio button in the same group).

To initialize a radio button element the user has to include the following files to the head of the page:

  • smart.base.css - the CSS file containing the styles for element
  • smart.element.js - the base class
  • smart.button.js - the JS file containing the base class about all button elements
  • smart.radiobutton.js - the JS file containing the element definition

The following code adds two radio buttons to the page.

<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="../../source/styles/smart.base.css" type="text/css" />
 <script type="text/javascript" src="webcomponents-lite.js">
</script> <script type="text/javascript" src="../../source/smart.element.js"></script> <script type="text/javascript" src="../../source/smart.button.js"></script> <script type="text/javascript" src="../../source/smart.radiobutton.js"></script> </head> <body> <smart-radio-button></smart-radio-button> <smart-radio-button></smart-radio-button> </body> </html>

Note how smart.element.js and webcomponents.min.js are declared before everything else. This is mandatory for all custom elements.

Demo

Appearance

smart-radio-button could contain a label. If the user wants to change this label, this can be accomplished by setting the innerHTML property of the element, like so:

<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="../../source/styles/smart.base.css" type="text/css" />
 <script type="text/javascript" src="webcomponents-lite.js">
</script> <script type="text/javascript" src="../../source/smart.element.js"></script> <script type="text/javascript" src="../../source/smart.button.js"></script> <script type="text/javascript" src="../../source/smart.radiobutton.js"></script> <script> window.onload = function () { document.querySelectorAll('smart-radio-button')[0].innerHTML = 'RadioButton 1'; document.querySelectorAll('smart-radio-button')[1].innerHTML = 'RadioButton 2'; } </script> </head> <body> <smart-radio-button>Radio Button</smart-radio-button> <smart-radio-button>Radio Button</smart-radio-button> </body> </html>

smart-radio-button could be part of radio grop. This could be achieved via groupName property. If groupName property is not set, the element is grouped with the other radio buttons in the parent container.

Demo

<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="../../source/styles/smart.base.css" type="text/css" />
 <script type="text/javascript" src="webcomponents-lite.js">
</script> <script type="text/javascript" src="../../source/smart.element.js"></script> <script type="text/javascript" src="../../source/smart.button.js"></script> <script type="text/javascript" src="../../source/smart.radiobutton.js"></script> </head> <body> <smart-radio-button group-name="radioGroup1">Radio Button 1</smart-radio-button> <smart-radio-button group-name="radioGroup1">Radio Button 2</smart-radio-button> <smart-radio-button group-name="radioGroup1">Radio Button 3</smart-radio-button> </body> </html>

Demo

Behavior

Using the checked property the user can change the check state of the element dynamically as well.

By default the checked state of the radio button is set to false. This property could be set to true or false. Checking radio button in group automatically unchecks previously checked button.

The element offers multiple click modes:

  • press
  • release
  • pressAndRelease

clickMode is a property of the button that can be changed either from the HTML tag by setting the attribute click-mode and assigning a new value to it or by following the earlier approach and change it dynamically via javascript during the onload stage of the window object or later

Here's how to set a new clickMode on element initialiation:

<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="../../source/styles/smart.base.css" type="text/css" />
 <script type="text/javascript" src="webcomponents-lite.js">
</script> <script type="text/javascript" src="../../source/smart.element.js"></script> <script type="text/javascript" src="../../source/smart.button.js"></script> <script type="text/javascript" src="../../source/smart.radiobutton.js"></script> </head> <body> <smart-radio-button click-mode="press">Radio Button</smart-radio-button> <smart-radio-button click-mode="press">Radio Button</smart-radio-button> </body> </html>

Demo

And here's how to change it via javascript after the element has been initialized:

<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="../../source/styles/smart.base.css" type="text/css" />
 <script type="text/javascript" src="webcomponents-lite.js">
</script> <script type="text/javascript" src="../../source/smart.element.js"></script> <script type="text/javascript" src="../../source/smartbutton.js"></script> <script type="text/javascript" src="../../source/smartradiobutton.js"></script> <script> window.onload = function () { document.querySelectorAll('smart-radio-button')[0].clickMode = 'press'; document.querySelectorAll('smart-radio-button')[1].clickMode = 'press'; } </script> </head> <body> <smart-radio-button>Radio Button</smart-radio-button> <smart-radio-button>Radio Button</smart-radio-button> </body> </html>

Demo

Using the enableContainerClick property the user can change the behavior when different parts of the element are clicked.

By default the enableContainerClick is set to false and the element changes it's state only when is clicked directly the radio button. When this property is set to true, clicking the element's label also changes it's state.

Keyboard Support

Smart.RadioButton check state could be changed via Space. Space should change the state of the current element only to Checked. If the elements is in radio group, it's check unchecks all other radio buttons. The element is focusable and can be focused using the Tab button.